new file mode 100644

@@ -0,0 +1,22 @@

+import React from "react";

+import PropTypes from "prop-types";

+

+export class FocusManager extends React.Component {

+  constructor() {

+    super();

+    this.ref = React.createRef();

+    this.doFocus = () => this.ref.current && this.ref.current.focus();

+  }

+  componentDidMount() {

+    if (this.ref.current) this.ref.current.focus();

+    //eslint-disable-next-line no-console

+    else console.error("ref unbound");

+  }

+  render() {

+    return this.props.children(this.ref, this.doFocus);

+  }

+}

+

+FocusManager.propTypes = {

+  children: PropTypes.func.isRequired

+};

@@ -1,6 +1,10 @@

 import React from "react";

 import PropTypes from "prop-types";

+const InputWithFocus = React.forwardRef((props, ref) => (

+  <input {...props} ref={ref} />

+));

+

 export class NameControl extends React.Component {

   constructor(props) {

     super(props);

@@ -13,7 +17,8 @@ export class NameControl extends React.Component {

     if (this.props.name === "") {

       return (

         <div>

-          <input

+          <InputWithFocus

+            ref={this.props.focusRef}

             type="text"

             value={this.state.cur_input}

             onChange={e => this.setState({ cur_input: e.target.value })}

@@ -14,6 +14,7 @@ import { rootReducer, updateName } from "./reducer";

 import { rootSaga, getIp, fail } from "./root-saga";

 import { put } from "redux-saga/effects";

+import { FocusManager } from "./FocusManager";

 // Store Setup ==============================================================================

@@ -46,7 +47,9 @@ function* toplevel() {

     ReactDOM.render(

       // The Toplevel component is wrapped in a provider, to make the store available to connect

       <Provider store={store}>

-        <ConnectedRoot />

+        <FocusManager>

+          {(ref, doFocus) => <ConnectedRoot focusRef={ref} {...{ doFocus }} />}

+        </FocusManager>

       </Provider>,

       document.getElementById("root"),

       resolve

@@ -3,7 +3,17 @@ import PropTypes from "prop-types";

 import { NameControl } from "./NameControl";

 import { IpControl } from "./IpControl";

-export const Root = ({ name, updateName, ip, getIp, fail, error, restart }) => (

+export const Root = ({

+  name,

+  updateName,

+  ip,

+  getIp,

+  fail,

+  error,

+  restart,

+  doFocus,

+  focusRef

+}) => (

   <div>

     {error ? (

       <div>

@@ -11,10 +21,11 @@ export const Root = ({ name, updateName, ip, getIp, fail, error, restart }) => (

         error resolved. <button onClick={restart}>Restart</button>

       </div>

     ) : null}

-    <NameControl name={name} updateName={updateName} />

+    <NameControl name={name} updateName={updateName} focusRef={focusRef} />

     <IpControl ip={ip} getIp={getIp} />

     <p />

     <button onClick={fail}>Fail</button>

+    <button onClick={doFocus}>Focus!</button>

   </div>

 );

 Root.propTypes = {