Autofocus search input in VizTypeControl modal onEnter

apache · Jun 12, 2017 · 75e917d · 75e917d
1 parent 16141ec
commit 75e917d
Showing 1 changed file with 18 additions and 1 deletion.
diff --git a/superset/assets/javascripts/explore/components/controls/VizTypeControl.jsx b/superset/assets/javascripts/explore/components/controls/VizTypeControl.jsx
@@ -25,17 +25,27 @@ export default class VizTypeControl extends React.PureComponent {
     };
     this.toggleModal = this.toggleModal.bind(this);
     this.changeSearch = this.changeSearch.bind(this);
+    this.setSearchRef = this.setSearchRef.bind(this);
+    this.focusSearch = this.focusSearch.bind(this);
   }
   onChange(vizType) {
     this.props.onChange(vizType);
     this.setState({ showModal: false });
   }
+  setSearchRef(searchRef) {
+    this.searchRef = searchRef;
+  }
   toggleModal() {
     this.setState({ showModal: !this.state.showModal });
   }
   changeSearch(event) {
     this.setState({ filter: event.target.value });
   }
+  focusSearch() {
+    if (this.searchRef) {
+      this.searchRef.focus();
+    }
+  }
   renderVizType(vizType) {
     const vt = vizType;
     return (
@@ -82,14 +92,21 @@ export default class VizTypeControl extends React.PureComponent {
         <Label onClick={this.toggleModal} style={{ cursor: 'pointer' }}>
           {visTypes[this.props.value].label}
         </Label>
-        <Modal show={this.state.showModal} onHide={this.toggleModal} bsSize="lg">
+        <Modal
+          show={this.state.showModal}
+          onHide={this.toggleModal}
+          onEnter={this.focusSearch}
+          onExit={this.setSearchRef}
+          bsSize="lg"
+        >
           <Modal.Header closeButton>
             <Modal.Title>Select a visualization type</Modal.Title>
           </Modal.Header>
           <Modal.Body>
             <div>
               <FormControl
                 id="formControlsText"
+                inputRef={(ref) => { this.setSearchRef(ref); }}
                 type="text"
                 bsSize="sm"
                 value={this.state.filter}