From 0a4ac70c2b2b2a2eddedff137f1d187792bb574a Mon Sep 17 00:00:00 2001
From: Sergey Petushkov <petushkov.sergey@gmail.com>
Date: Mon, 12 Sep 2022 11:35:23 +0200
Subject: [PATCH] fix(browser-repl): reset autocomplete on editor focus

---
 .../browser-repl/src/components/editor.tsx    | 73 +++++++++++++++----
 1 file changed, 58 insertions(+), 15 deletions(-)

diff --git a/packages/browser-repl/src/components/editor.tsx b/packages/browser-repl/src/components/editor.tsx
index 0de4246c77..7435ca3830 100644
--- a/packages/browser-repl/src/components/editor.tsx
+++ b/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,7 +137,7 @@ 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) {
@@ -103,8 +145,9 @@ export class Editor extends Component<EditorProps> {
         }
       }}
       theme="mongosh"
-      onChange={this.props.onChange}
       onLoad={this.onEditorLoad}
+      onFocus={this.onFocus}
+      onChange={this.props.onChange}
       commands={[
         {
           name: 'return',