From 4583cd3faaf1e5be4960ef5a3c2975f5fd18ee55 Mon Sep 17 00:00:00 2001
From: Diego Medina <diegomedina24@gmail.com>
Date: Mon, 21 Mar 2022 15:58:35 -0300
Subject: [PATCH] fix(sql lab): Selecting edit on a query from query history
 doesn't update the SQL Editor properly

---
 .../SqlLab/components/AceEditorWrapper/index.tsx | 16 ++++++++++++----
 .../src/SqlLab/components/SqlEditor/index.jsx    |  6 ++++++
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/superset-frontend/src/SqlLab/components/AceEditorWrapper/index.tsx b/superset-frontend/src/SqlLab/components/AceEditorWrapper/index.tsx
index 25da49137ad60..4462d9fc4e798 100644
--- a/superset-frontend/src/SqlLab/components/AceEditorWrapper/index.tsx
+++ b/superset-frontend/src/SqlLab/components/AceEditorWrapper/index.tsx
@@ -66,7 +66,6 @@ interface Props {
 
 interface State {
   sql: string;
-  selectedText: string;
   words: AceCompleterKeyword[];
 }
 
@@ -80,13 +79,20 @@ class AceEditorWrapper extends React.PureComponent<Props, State> {
     extendedTables: [],
   };
 
+  private currentSelectionCache;
+
   constructor(props: Props) {
     super(props);
     this.state = {
       sql: props.sql,
-      selectedText: '',
       words: [],
     };
+
+    // The editor changeSelection is called multiple times in a row,
+    // faster than React reconciliation process, so the selected text
+    // needs to be stored out of the state to ensure changes to it
+    // get saved immediately
+    this.currentSelectionCache = '';
     this.onChange = this.onChange.bind(this);
   }
 
@@ -148,17 +154,19 @@ class AceEditorWrapper extends React.PureComponent<Props, State> {
     editor.$blockScrolling = Infinity; // eslint-disable-line no-param-reassign
     editor.selection.on('changeSelection', () => {
       const selectedText = editor.getSelectedText();
+
       // Backspace trigger 1 character selection, ignoring
       if (
-        selectedText !== this.state.selectedText &&
+        selectedText !== this.currentSelectionCache &&
         selectedText.length !== 1
       ) {
-        this.setState({ selectedText });
         this.props.actions.queryEditorSetSelectedText(
           this.props.queryEditor,
           selectedText,
         );
       }
+
+      this.currentSelectionCache = selectedText;
     });
   }
 
diff --git a/superset-frontend/src/SqlLab/components/SqlEditor/index.jsx b/superset-frontend/src/SqlLab/components/SqlEditor/index.jsx
index 7899cbf71908a..933c525857124 100644
--- a/superset-frontend/src/SqlLab/components/SqlEditor/index.jsx
+++ b/superset-frontend/src/SqlLab/components/SqlEditor/index.jsx
@@ -239,6 +239,12 @@ class SqlEditor extends React.PureComponent {
     });
   }
 
+  componentDidUpdate() {
+    if (this.props.queryEditor.sql !== this.state.sql) {
+      this.onSqlChanged(this.props.queryEditor.sql);
+    }
+  }
+
   componentWillUnmount() {
     window.removeEventListener('resize', this.handleWindowResize);
     window.removeEventListener('beforeunload', this.onBeforeUnload);