fix(browser-repl): reset autocomplete on editor focus COMPASS-4760 (#1345)

Author: gribnoysup

packages/browser-repl/src/components/editor.tsx

@@ -44,29 +44,71 @@ export class Editor extends Component<EditorProps> {
     this.editor = editor;
     this.visibleCursorDisplayStyle = this.editor.renderer.$cursorLayer.element.style.display;
 
+    editor.commands.on('afterExec', (e: any) => {
+      if (
+        // Only suggest autocomplete if autocompleter was set
+        this.autocompleter &&
+        e.command.name === 'insertstring' &&
+        /^[\w.]$/.test(e.args)
+      ) {
+        this.editor.execCommand('startAutocomplete');
+      }
+    });
+  };
+
+  private autocompleter: AceAutocompleterAdapter | null = null;
+
+  private editorId: number = Date.now();
+
+  constructor(props: EditorProps) {
+    super(props);
     if (this.props.autocompleter) {
-      editor.commands.on('afterExec', function(e: any) {
-        if (e.command.name === 'insertstring' && /^[\w.]$/.test(e.args)) {
-          editor.execCommand('startAutocomplete');
-        }
-      });
+      this.autocompleter = new AceAutocompleterAdapter(
+        this.props.autocompleter
+      );
+    }
+  }
 
-      tools.setCompleters([new AceAutocompleterAdapter(this.props.autocompleter)]);
+  private onFocus = () => {
+    if (this.autocompleter) {
+      tools.setCompleters([this.autocompleter]);
+    } else {
+      tools.setCompleters([]);
     }
   };
 
-  componentDidUpdate(): void {
-    if (this.props.operationInProgress) {
-      this.hideCursor();
-    } else {
-      this.showCursor();
+  componentDidUpdate(prevProps: EditorProps): void {
+    if (prevProps.operationInProgress !== this.props.operationInProgress) {
+      if (this.props.operationInProgress) {
+        this.hideCursor();
+      } else {
+        this.showCursor();
+      }
+    }
+
+    if (prevProps.moveCursorToTheEndOfInput !== this.props.moveCursorToTheEndOfInput) {
+      if (this.props.moveCursorToTheEndOfInput) {
+        this.moveCursorToTheEndOfInput();
+      }
     }
 
-    if (this.props.moveCursorToTheEndOfInput) {
-      this.moveCursorToTheEndOfInput();
+    if (prevProps.autocompleter !== this.props.autocompleter) {
+      if (this.props.autocompleter) {
+        this.autocompleter = new AceAutocompleterAdapter(
+          this.props.autocompleter
+        );
+        tools.setCompleters([this.autocompleter]);
+      } else {
+        this.autocompleter = null;
+        tools.setCompleters([]);
+      }
     }
   }
 
+  componentWillUnmount(): void {
+    this.autocompleter = null;
+  }
+
   private hideCursor(): void {
     this.editor.renderer.$cursorLayer.element.style.display = 'none';
   }
@@ -95,16 +137,17 @@ export class Editor extends Component<EditorProps> {
         tabSize: 2,
         useWorker: false
       }}
-      name={`mongosh-ace-${Date.now()}`}
+      name={`mongosh-ace-${this.editorId}`}
       mode="javascript"
       ref={(ref: AceEditor | null): void => {
         if (this.props.setInputRef && ref !== null) {
           this.props.setInputRef(ref as { editor?: IAceEditor });
         }
       }}
       theme="mongosh"
-      onChange={this.props.onChange}
       onLoad={this.onEditorLoad}
+      onFocus={this.onFocus}
+      onChange={this.props.onChange}
       commands={[
         {
           name: 'return',