#106 Focus to Global search

onechiporenko · Jul 18, 2016 · 2e44a35 · 2e44a35
1 parent 1c74b71
commit 2e44a35
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 4 deletions.
diff --git a/addon/components/models-table.js b/addon/components/models-table.js
@@ -49,7 +49,8 @@ const {
   Component,
   assert,
   String: S,
-  Object: O
+  Object: O,
+  $: jQ
 } = Ember;
 
 const NOT_SORTED = -1;
@@ -249,6 +250,15 @@ export default Component.extend({
    */
   showGlobalFilter: true,
 
+  /**
+   * Determines if focus should be on the "Global filter"-field on component render
+   *
+   * @type {boolean}
+   * @name ModelsTable#focusGlobalFilter
+   * @default false
+   */
+  focusGlobalFilter: false,
+
   /**
    * Determines if <code>processedColumns</code> will be updated if <code>columns</code> are changed (<code>propertyName</code> and
    * <code>template</code> are observed)
@@ -782,6 +792,12 @@ export default Component.extend({
     });
   }),
 
+  focus: on('didInsertElement', function () {
+    if (get(this, 'showGlobalFilter') && get(this, 'focusGlobalFilter')) {
+      jQ('.filterString').focus();
+    }
+  }),
+
   /**
    * Wrapper for <code>_setupColumns</code> to call it only once when observer is fired
    *

diff --git a/tests/dummy/app/templates/application.hbs b/tests/dummy/app/templates/application.hbs
@@ -9,9 +9,9 @@
   </div>
   <div class="row">
     <div class="col-md-12">
-      <ul class="nav nav-pills">
-        <li>{{#link-to "index"}}Docs{{/link-to}}</li>
-        <li>{{#link-to "examples"}}Examples{{/link-to}}</li>
+      <ul class="nav nav-tabs">
+        {{#link-to "index" tagName="li"}}{{#link-to "index"}}Docs{{/link-to}}{{/link-to}}
+        {{#link-to "examples" tagName="li"}}{{#link-to "examples"}}Examples{{/link-to}}{{/link-to}}
       </ul>
     </div>
   </div>

diff --git a/tests/dummy/app/templates/index.hbs b/tests/dummy/app/templates/index.hbs
@@ -183,6 +183,12 @@
             <td><pre>{{c.showGlobalFilter}}</pre></td>
             <td><p>Determines if "Global filter"-field should be shown</p></td>
           </tr>
+          <tr>
+            <td><code>focusGlobalFilter</code></td>
+            <td>Boolean</td>
+            <td><pre>{{c.focusGlobalFilter}}</pre></td>
+            <td><p>Determines if focus should be on the "Global filter"-field on component render</p></td>
+          </tr>
           <tr>
             <td><code>doFilteringByHiddenColumns</code></td>
             <td>Boolean</td>

diff --git a/tests/integration/components/models-table-test.js b/tests/integration/components/models-table-test.js
@@ -391,6 +391,32 @@ test('global filtering (ignore case ON)', function(assert) {
 
 });
 
+test('focus on global filter', function (assert) {
+
+  this.setProperties({
+    focusGlobalFilter: true,
+    columns: generateColumns(['index', 'someWord']),
+    data: generateContent(10, 1)
+  });
+  this.render(hbs`{{models-table columns=columns data=data focusGlobalFilter=focusGlobalFilter}}`);
+
+  assert.equal(getCount(selectors.filterString + ':focus'), 1, 'Global Filter is on focus');
+
+});
+
+test('focus not on global filter', function (assert) {
+
+  this.setProperties({
+    focusGlobalFilter: false,
+    columns: generateColumns(['index', 'someWord']),
+    data: generateContent(10, 1)
+  });
+  this.render(hbs`{{models-table columns=columns data=data focusGlobalFilter=focusGlobalFilter}}`);
+
+  assert.equal(getCount(selectors.filterString + ':focus'), 0, 'Global Filter is not on focus');
+
+});
+
 test('filtering by columns (ignore case OFF)', function (assert) {
 
   var columns = generateColumns(['index', 'reversedIndex']);