Merge pull request #4251 from metabase/commit-filter-on-enter

Commit filter when the enter key is pressed

frontend/src/metabase/query_builder/components/filters/FilterPopover.jsx

@@ -190,6 +190,7 @@ export default class FilterPopover extends Component<*, Props, State> {
                         onValuesChange={onValuesChange}
                         placeholder={placeholder}
                         multi={operator.multi}
+                        onCommit={this.onCommit}
                     />
                 );
             } else if (operatorField.type === "text") {
@@ -199,6 +200,7 @@ export default class FilterPopover extends Component<*, Props, State> {
                         onValuesChange={onValuesChange}
                         placeholder={placeholder}
                         multi={operator.multi}
+                        onCommit={this.onCommit}
                     />
                 );
             } else if (operatorField.type === "number") {
@@ -208,6 +210,7 @@ export default class FilterPopover extends Component<*, Props, State> {
                         onValuesChange={onValuesChange}
                         placeholder={placeholder}
                         multi={operator.multi}
+                        onCommit={this.onCommit}
                     />
                 );
             }
@@ -215,6 +218,12 @@ export default class FilterPopover extends Component<*, Props, State> {
         });
     }
 
+    onCommit = () => {
+        if (this.isValid()) {
+            this.commitFilter(this.state.filter)
+        }
+    }
+
     render() {
         let { filter } = this.state;
         if (filter[0] === "SEGMENT" || filter[1] == undefined) {

frontend/src/metabase/query_builder/components/filters/pickers/TextPicker.jsx

@@ -10,7 +10,8 @@ type Props = {
     onValuesChange: (values: Array<string|null>) => void,
     validations: bool[],
     placeholder?: string,
-    multi?: bool
+    multi?: bool,
+    onCommit: () => void,
 };
 
 export default class TextPicker extends Component<*, Props, *> {
@@ -19,7 +20,8 @@ export default class TextPicker extends Component<*, Props, *> {
         onValuesChange: PropTypes.func.isRequired,
         placeholder: PropTypes.string,
         validations: PropTypes.array,
-        multi: PropTypes.bool
+        multi: PropTypes.bool,
+        onCommit: PropTypes.func,
     };
 
     static defaultProps = {
@@ -46,7 +48,7 @@ export default class TextPicker extends Component<*, Props, *> {
     }
 
     render() {
-        let { values, validations, multi } = this.props;
+        let { values, validations, multi, onCommit } = this.props;
 
         return (
             <div>
@@ -61,6 +63,11 @@ export default class TextPicker extends Component<*, Props, *> {
                                 type="text"
                                 value={value}
                                 onChange={(e) => this.setValue(index, e.target.value)}
+                                onKeyPress={(e) => {
+                                    if (e.key === "Enter" && onCommit) {
+                                        onCommit();
+                                    }
+                                }}
                                 placeholder={this.props.placeholder}
                                 autoFocus={true}
                             />