From 58a704b84c152485b7f9c44c950c70046ca4e99e Mon Sep 17 00:00:00 2001
From: Andrew Pariser <pariser@gmail.com>
Date: Fri, 28 Jul 2017 14:57:24 -0700
Subject: [PATCH] Autofocus search input in VizTypeControl modal onEnter
 (#2929)

---
 .../components/controls/VizTypeControl.jsx    | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/superset/assets/javascripts/explore/components/controls/VizTypeControl.jsx b/superset/assets/javascripts/explore/components/controls/VizTypeControl.jsx
index 8fdd3f2d5b..0b454ac862 100644
--- 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,7 +92,13 @@ 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>
@@ -90,6 +106,7 @@ export default class VizTypeControl extends React.PureComponent {
             <div>
               <FormControl
                 id="formControlsText"
+                inputRef={(ref) => { this.setSearchRef(ref); }}
                 type="text"
                 bsSize="sm"
                 value={this.state.filter}