dojo: fixes #3297

pkg/interface/src/views/apps/dojo/components/input.js

@@ -14,10 +14,16 @@ export class Input extends Component {
   }
 
   componentDidUpdate() {
+    if (
+      !document.activeElement == document.body
+      || document.activeElement == this.inputRef.current
+    ) {
+      this.inputRef.current.focus();
       this.inputRef.current.setSelectionRange(this.props.cursor, this.props.cursor);
     }
+  }
 
-  keyPress = (e) => {
+  keyPress(e) {
     if ((e.getModifierState('Control') || event.getModifierState('Meta'))
        && e.key === 'v') {
       return;
@@ -33,78 +39,79 @@ export class Input extends Component {
       return;
     }
 
-  // submit on enter
-  if (e.key === 'Enter') {
-    this.setState({ awaiting: true, type: 'Sending to Dojo' });
-    this.props.api.soto('ret').then(() => {
-      this.setState({ awaiting: false });
-    });
-  } else if ((e.key === 'Backspace') && (this.props.cursor > 0)) {
-    this.props.store.doEdit({ del: this.props.cursor - 1 });
-    return this.props.store.setState({ cursor: this.props.cursor - 1 });
-  } else if (e.key === 'Backspace') {
-    return;
-  } else if (e.key.startsWith('Arrow')) {
-    if (e.key === 'ArrowLeft') {
-      if (this.props.cursor > 0) {
-        this.props.store.setState({ cursor: this.props.cursor - 1 });
-      }
-    } else if (e.key === 'ArrowRight') {
-      if (this.props.cursor < this.props.input.length) {
-        this.props.store.setState({ cursor: this.props.cursor + 1 });
+    // submit on enter
+    if (e.key === 'Enter') {
+      this.setState({ awaiting: true, type: 'Sending to Dojo' });
+      this.props.api.soto('ret').then(() => {
+        this.setState({ awaiting: false });
+      });
+    } else if ((e.key === 'Backspace') && (this.props.cursor > 0)) {
+      this.props.store.doEdit({ del: this.props.cursor - 1 });
+      return this.props.store.setState({ cursor: this.props.cursor - 1 });
+    } else if (e.key === 'Backspace') {
+      return;
+    } else if (e.key.startsWith('Arrow')) {
+      if (e.key === 'ArrowLeft') {
+        if (this.props.cursor > 0) {
+          this.props.store.setState({ cursor: this.props.cursor - 1 });
+        }
+      } else if (e.key === 'ArrowRight') {
+        if (this.props.cursor < this.props.input.length) {
+          this.props.store.setState({ cursor: this.props.cursor + 1 });
+        }
       }
     }
+
+    // tab completion
+    else if (e.key === 'Tab') {
+      this.setState({ awaiting: true, type: 'Getting suggestions' });
+      this.props.api.soto({ tab: this.props.cursor }).then(() => {
+        this.setState({ awaiting: false });
+      });
+    }
+
+    // capture and transmit most characters
+    else {
+      this.props.store.doEdit({ ins: { cha: e.key, at: this.props.cursor } });
+      this.props.store.setState({ cursor: this.props.cursor + 1 });
+    }
   }
 
-  // tab completion
-  else if (e.key === 'Tab') {
-    this.setState({ awaiting: true, type: 'Getting suggestions' });
-    this.props.api.soto({ tab: this.props.cursor }).then(() => {
-      this.setState({ awaiting: false });
-    });
-  }
-
-  // capture and transmit most characters
-  else {
-    this.props.store.doEdit({ ins: { cha: e.key, at: this.props.cursor } });
-    this.props.store.setState({ cursor: this.props.cursor + 1 });
-  }
-}
-
-render() {
-  return (
-    <div className="flex flex-row flex-grow-1 relative">
-      <div className="flex-shrink-0">{cite(this.props.ship)}:dojo
+  render() {
+    return (
+      <div className="flex flex-row flex-grow-1 relative">
+        <div className="flex-shrink-0">{cite(this.props.ship)}:dojo
+        </div>
+        <span id="prompt">
+          {this.props.prompt}
+        </span>
+        <input
+          autoFocus
+          autocorrect="off"
+          autocapitalize="off"
+          spellcheck="false"
+          tabindex="0"
+          wrap="off"
+          className="mono ml1 flex-auto dib w-100"
+          id="dojo"
+          cursor={this.props.cursor}
+          onClick={e => this.props.store.setState({ cursor: e.target.selectionEnd })}
+          onKeyDown={this.keyPress}
+          onPaste={(e) => {
+            const clipboardData = e.clipboardData || window.clipboardData;
+            const paste = Array.from(clipboardData.getData('Text'));
+            paste.reduce(async (previous, next) => {
+              await previous;
+              this.setState({ cursor: this.props.cursor + 1 });
+              return this.props.store.doEdit({ ins: { cha: next, at: this.props.cursor } });
+            }, Promise.resolve());
+            e.preventDefault();
+            }}
+          ref={this.inputRef}
+          defaultValue={this.props.input}
+        />
+        <Spinner awaiting={this.state.awaiting} text={`${this.state.type}...`} classes="absolute right-0 bottom-0 inter pa ba pa2 b--gray1-d" />
       </div>
-      <span id="prompt">
-        {this.props.prompt}
-      </span>
-      <input
-        autocorrect="off"
-        autocapitalize="off"
-        spellcheck="false"
-        tabindex="0"
-        wrap="off"
-        className="mono ml1 flex-auto dib w-100"
-        id="dojo"
-        cursor={this.props.cursor}
-        onClick={e => this.props.store.setState({ cursor: e.target.selectionEnd })}
-        onKeyDown={this.keyPress}
-        onPaste={(e) => {
-          const clipboardData = e.clipboardData || window.clipboardData;
-          const paste = Array.from(clipboardData.getData('Text'));
-          paste.reduce(async (previous, next) => {
-            await previous;
-            this.setState({ cursor: this.props.cursor + 1 });
-            return this.props.store.doEdit({ ins: { cha: next, at: this.props.cursor } });
-          }, Promise.resolve());
-          e.preventDefault();
-          }}
-        ref={this.inputRef}
-        defaultValue={this.props.input}
-      />
-      <Spinner awaiting={this.state.awaiting} text={`${this.state.type}...`} classes="absolute right-0 bottom-0 inter pa ba pa2 b--gray1-d" />
-    </div>
     );
   }
 }