From 32fc0ff6d0b437766d16db128a7b1d40a09080bb Mon Sep 17 00:00:00 2001
From: vera-liu <vera.liu@airbnb.com>
Date: Wed, 30 Nov 2016 09:09:35 -0800
Subject: [PATCH] [Bugfix] autocomplete in sqleditor doesnot use newly loaded
 table columns (#1712)

---
 .../SqlLab/components/AceEditorWrapper.jsx    | 24 ++++++++++---------
 1 file changed, 13 insertions(+), 11 deletions(-)

diff --git a/superset/assets/javascripts/SqlLab/components/AceEditorWrapper.jsx b/superset/assets/javascripts/SqlLab/components/AceEditorWrapper.jsx
index f41730d6a3..5b34edac22 100644
--- a/superset/assets/javascripts/SqlLab/components/AceEditorWrapper.jsx
+++ b/superset/assets/javascripts/SqlLab/components/AceEditorWrapper.jsx
@@ -33,11 +33,11 @@ class AceEditorWrapper extends React.PureComponent {
   componentDidMount() {
     // Making sure no text is selected from previous mount
     this.props.actions.queryEditorSetSelectedText(this.props.queryEditor, null);
-    this.setAutoCompleter();
+    this.setAutoCompleter(this.props);
   }
   componentWillReceiveProps(nextProps) {
     if (!areArraysShallowEqual(this.props.tables, nextProps.tables)) {
-      this.setAutoCompleter();
+      this.setAutoCompleter(nextProps);
     }
   }
   textChange(text) {
@@ -63,11 +63,11 @@ class AceEditorWrapper extends React.PureComponent {
         this.props.queryEditor, editor.getSelectedText());
     });
   }
-  setAutoCompleter() {
+  setAutoCompleter(props) {
     // Loading table and column names as auto-completable words
     let words = [];
     const columns = {};
-    const tables = this.props.tables || [];
+    const tables = props.tables || [];
     tables.forEach(t => {
       words.push({ name: t.name, value: t.name, score: 55, meta: 'table' });
       const cols = t.columns || [];
@@ -78,13 +78,15 @@ class AceEditorWrapper extends React.PureComponent {
     words = words.concat(Object.keys(columns).map(col => (
       { name: col, value: col, score: 50, meta: 'column' }
     )));
-    this.setState({ words });
-    const completer = {
-      getCompletions: this.getCompletions.bind(this),
-    };
-    if (langTools) {
-      langTools.setCompleters([completer, langTools.keyWordCompleter]);
-    }
+
+    this.setState({ words }, () => {
+      const completer = {
+        getCompletions: this.getCompletions.bind(this),
+      };
+      if (langTools) {
+        langTools.setCompleters([completer, langTools.keyWordCompleter]);
+      }
+    });
   }
   render() {
     return (