Focus first input on load

diff --git a/src/App.js b/src/App.js
index 2dadf8f7e347d65e1240d0d6bf1fd50c2d1fe1cd..f6678cf3dca632fdc26d0dbc2c40a45d909bd5ec 100644 (file)
--- a/src/App.js
+++ b/src/App.js
@@ -28,6 +28,10 @@ export default class App extends React.Component {
     this.setState({value});
   }
 
+  componentDidMount() {
+    this._firstInput.focus();
+  }
+
   render() {
     const {value} = this.state;
 
@@ -40,6 +44,7 @@ export default class App extends React.Component {
           <Field
             base={16}
             onValueChange={this._onValueChange}
+            ref={ref => this._firstInput = ref}
             value={value}
           />
         </Label>

diff --git a/src/Field.react.js b/src/Field.react.js
index c5b79834678e7812603c881be63d7bc5ea266b68..912a2aee80e88ec52e9ee9acef1ca7ab7e8ff9f4 100644 (file)
--- a/src/Field.react.js
+++ b/src/Field.react.js
@@ -95,6 +95,10 @@ export default class Field extends React.Component {
     );
   }
 
+  focus() {
+    React.findDOMNode(this._input).focus();
+  }
+
   render() {
     return (
       <span className="hextrapolate-field">