Optimistically update sort/direction to avoid race condition when popover goes away

frontend/src/lib/query.js

@@ -345,12 +345,12 @@ var Query = {
     },
 
     removeSort(query, index) {
-        var queryOrderBy = query.order_by;
-
-        if (queryOrderBy.length === 1) {
-            delete query.order_by;
-        } else {
-            queryOrderBy.splice(index, 1);
+        if (query.order_by) {
+            if (query.order_by.length === 1) {
+                delete query.order_by;
+            } else {
+                query.order_by.splice(index, 1);
+            }
         }
     },
 

frontend/src/query_builder/SortWidget.jsx

@@ -4,11 +4,13 @@ import Icon from "metabase/components/Icon.jsx";
 import FieldWidget from './FieldWidget.jsx';
 import SelectionModule from './SelectionModule.jsx';
 
+import _ from "underscore";
+
 export default class SortWidget extends Component {
     constructor(props, context) {
         super(props, context);
-        this.setDirection = this.setDirection.bind(this);
-        this.setField = this.setField.bind(this);
+
+        _.bindAll(this, "setDirection", "setField");
     }
 
     static propTypes = {
@@ -41,12 +43,16 @@ export default class SortWidget extends Component {
     setField(value) {
         if (this.state.field !== value) {
             this.props.updateSort([value, this.state.direction]);
+            // Optimistically set field state so componentWillUnmount logic works correctly
+            this.setState({ field: value });
         }
     }
 
     setDirection(value) {
         if (this.state.direction !== value) {
             this.props.updateSort([this.state.field, value]);
+            // Optimistically set direction state so componentWillUnmount logic works correctly
+            this.setState({ direction: value });
         }
     }