Auto-focus new open chat input box

ts/components/session/SessionClosableOverlay.tsx

@@ -22,8 +22,18 @@ interface Props {
 }
 
 export class SessionClosableOverlay extends React.Component<Props> {
+  private readonly inputRef: React.RefObject<SessionIdEditable>;
+
   public constructor(props: Props) {
     super(props);
+
+    this.inputRef = React.createRef();
+  }
+
+  public componentDidMount() {
+    if (this.inputRef.current) {
+      this.inputRef.current.focus();
+    }
   }
 
   public render(): JSX.Element {
@@ -89,6 +99,7 @@ export class SessionClosableOverlay extends React.Component<Props> {
           <hr className="green" />
         </div>
         <SessionIdEditable
+          ref={this.inputRef}
           editable={true}
           placeholder={placeholder}
           onChange={onChangeSessionID}

ts/components/session/SessionIdEditable.tsx

@@ -8,16 +8,30 @@ interface Props {
 }
 
 export class SessionIdEditable extends React.PureComponent<Props> {
+  private readonly inputRef: React.RefObject<HTMLInputElement>;
+
+  public constructor(props: Props) {
+    super(props);
+    this.inputRef = React.createRef();
+  }
+
   public componentWillUnmount() {
     //FIXME ugly hack to empty the content editable div used on enter session ID
     window.Session.emptyContentEditableDivs();
   }
 
+  public focus() {
+    if (this.inputRef.current) {
+      this.inputRef.current.focus();
+    }
+  }
+
   public render() {
     const { placeholder, editable, onChange, text } = this.props;
 
     return (
       <div
+        ref={this.inputRef}
         className="session-id-editable"
         placeholder={placeholder}
         contentEditable={editable}