superset-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From maximebeauche...@apache.org
Subject [incubator-superset] branch master updated: Autofocus search input in VizTypeControl modal onEnter (#2929)
Date Fri, 28 Jul 2017 21:57:27 GMT
This is an automated email from the ASF dual-hosted git repository.

maximebeauchemin pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-superset.git


The following commit(s) were added to refs/heads/master by this push:
     new 58a704b  Autofocus search input in VizTypeControl modal onEnter (#2929)
58a704b is described below

commit 58a704b84c152485b7f9c44c950c70046ca4e99e
Author: Andrew Pariser <pariser@gmail.com>
AuthorDate: Fri Jul 28 14:57:24 2017 -0700

    Autofocus search input in VizTypeControl modal onEnter (#2929)
---
 .../explore/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 8fdd3f2..0b454ac 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}

-- 
To stop receiving notification emails like this one, please contact
['"commits@superset.apache.org" <commits@superset.apache.org>'].

Mime
View raw message