Merge pull request #31 from hyojin/focus-filter-input

Set focus to input when filter is activated
hyojin · May 24, 2017 · 5bdf775 · 5bdf775
2 parents c2d2d40 + 6f04fdb
commit 5bdf775
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 1 deletion.
diff --git a/src/DataTables/DataTablesHeaderToolbar.js b/src/DataTables/DataTablesHeaderToolbar.js
@@ -72,12 +72,21 @@ class DataTablesHeaderToolbar extends Component {
   constructor(props, context) {
     super(props, context);
     this.filterValueTimer = undefined;
+    this.filterInput = undefined;
     this.state = {
       mode: 'default',
       filterValue: '',
     };
   }
 
+  componentDidUpdate(prevProps, prevState) {
+    if (prevState.mode === 'default' && this.state.mode === 'filter') {
+      if (this.filterInput) {
+        this.filterInput.focus();
+      }
+    }
+  }
+
   handleFilterClick = () => {
     const mode = this.state.mode === 'default' ? 'filter' : 'default';
     const {filterValue} = this.state;
@@ -151,6 +160,9 @@ class DataTablesHeaderToolbar extends Component {
               hintText={filterHintText}
               onChange={this.handleFilterValueChange}
               value={filterValue}
+              ref={(textField) => {
+                this.filterInput = textField ? textField.input : null;
+              }}
             />
           </div>
           <div style={styles.headerToolbarDefaultIcons}>

diff --git a/test/DataTables/DataTables.spec.js b/test/DataTables/DataTables.spec.js
@@ -241,8 +241,12 @@ describe('<DataTables />', function() {
       wrapper.find(DataTablesRowColumn).first().simulate('click');
       expect(handleCellDoubleClick).to.have.property('callCount', 1);
     });
-    it('should call filter value change handler', function(done) {
+    it('should call filter value change handler and set focus to input', function(done) {
       wrapper.find(DataTablesHeaderToolbar).find(IconButton).simulate('click');
+      const inputNodeInstanceId = Object.keys(wrapper.find(DataTablesHeaderToolbar).find(TextField).find('input').getDOMNode())[0];
+      const inputDomId = wrapper.find(DataTablesHeaderToolbar).find(TextField).find('input').getDOMNode()[inputNodeInstanceId]._domID;
+      const activeElementDomId = document.activeElement[inputNodeInstanceId]._domID;
+      expect(inputDomId).to.equal(activeElementDomId);
       wrapper.find(DataTablesHeaderToolbar).find(TextField).find('input')
           .simulate('change', {target: {value: 'dummy'}});
       setTimeout(() => {