Fix up/down when autocomplete is open (#5776)

Author: rchiodo

news/2 Fixes/5774.md

@@ -0,0 +1 @@
+Fix problem with using up/down arrows in autocomplete.

package-lock.json

@@ -43,6 +43,7 @@ interface ICodeState {
 export class Code extends React.Component<ICodeProps, ICodeState> {
     private subscriptions: monacoEditor.IDisposable[] = [];
     private lastCleanVersionId: number = 0;
+    private editorRef: React.RefObject<MonacoEditor> = React.createRef<MonacoEditor>();
 
     constructor(prop: ICodeProps) {
         super(prop);
@@ -102,6 +103,7 @@ export class Code extends React.Component<ICodeProps, ICodeState> {
                     editorMounted={this.editorDidMount}
                     options={options}
                     openLink={this.props.openLink}
+                    ref={this.editorRef}
                 />
                 <div className={waterMarkClass}>{this.getWatermarkString()}</div>
             </div>
@@ -135,9 +137,11 @@ export class Code extends React.Component<ICodeProps, ICodeState> {
         // Listen for model changes
         this.subscriptions.push(editor.onDidChangeModelContent(this.modelChanged));
 
-        // List for key up/down events.
-        this.subscriptions.push(editor.onKeyDown(this.onKeyDown));
-        this.subscriptions.push(editor.onKeyUp(this.onKeyUp));
+        // List for key up/down events if not read only
+        if (!this.props.readOnly) {
+            this.subscriptions.push(editor.onKeyDown(this.onKeyDown));
+            this.subscriptions.push(editor.onKeyUp(this.onKeyUp));
+        }
 
         // Indicate we're ready
         this.props.onCreated(this.props.code, model!.id);
@@ -203,8 +207,15 @@ export class Code extends React.Component<ICodeProps, ICodeState> {
         return '';
     }
 
+    private isAutoCompleteOpen() : boolean {
+        if (this.editorRef.current) {
+            return this.editorRef.current.isSuggesting();
+        }
+        return false;
+    }
+
     private arrowUp(e: monacoEditor.IKeyboardEvent) {
-        if (this.state.editor && this.state.model) {
+        if (this.state.editor && this.state.model && !this.isAutoCompleteOpen()) {
             const cursor = this.state.editor.getPosition();
             if (cursor && cursor.lineNumber === 1 && this.props.history) {
                 const currentValue = this.getContents();
@@ -220,7 +231,7 @@ export class Code extends React.Component<ICodeProps, ICodeState> {
     }
 
     private arrowDown(e: monacoEditor.IKeyboardEvent) {
-        if (this.state.editor && this.state.model) {
+        if (this.state.editor && this.state.model && !this.isAutoCompleteOpen()) {
             const cursor = this.state.editor.getPosition();
             if (cursor && cursor.lineNumber === this.state.model.getLineCount() && this.props.history) {
                 const currentValue = this.getContents();

src/datascience-ui/history-react/code.tsx

@@ -182,6 +182,15 @@ export class MonacoEditor extends React.Component<IMonacoEditorProps, IMonacoEdi
         );
     }
 
+    public isSuggesting() : boolean {
+        // This should mean our widgetParent has some height
+        if (this.widgetParent && this.widgetParent.firstChild && this.widgetParent.firstChild.childNodes.length >= 2) {
+            const suggestWidget = this.widgetParent.firstChild.childNodes.item(1) as HTMLDivElement;
+            return suggestWidget && suggestWidget.className.includes('visible');
+        }
+        return false;
+    }
+
     private windowResized = () => {
         if (this.resizeTimer) {
             clearTimeout(this.resizeTimer);