From 34c179f0077d9e6365f925e943c0fcb334862706 Mon Sep 17 00:00:00 2001
From: Maxim Shishmarev <maxim@loki.network>
Date: Tue, 28 Jan 2020 16:39:12 +1100
Subject: [PATCH] Auto-focus new open chat input box

---
 ts/components/session/SessionClosableOverlay.tsx | 11 +++++++++++
 ts/components/session/SessionIdEditable.tsx      | 14 ++++++++++++++
 2 files changed, 25 insertions(+)

diff --git a/ts/components/session/SessionClosableOverlay.tsx b/ts/components/session/SessionClosableOverlay.tsx
index 3737089a9..30d9a94f3 100644
--- a/ts/components/session/SessionClosableOverlay.tsx
+++ b/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}
diff --git a/ts/components/session/SessionIdEditable.tsx b/ts/components/session/SessionIdEditable.tsx
index 06c246e17..d7ca5954e 100644
--- a/ts/components/session/SessionIdEditable.tsx
+++ b/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}