Add a class to the search input, so CSS hierarchy is flatter (#514)

addon/components/power-select/before-options.js

@@ -53,7 +53,7 @@ export default Ember.Component.extend({
   },
 
   focusInput() {
-    this.input = self.document.querySelector('.ember-power-select-search input');
+    this.input = self.document.querySelector('.ember-power-select-search-input');
     if (this.input) {
       run.scheduleOnce('afterRender', this.input, 'focus');
     }

addon/templates/components/power-select/before-options.hbs

@@ -3,6 +3,7 @@
     <input type="search" autocomplete="off"
       autocorrect="off" autocapitalize="off"
       spellcheck="false" role="combobox"
+      class="ember-power-select-search-input"
       aria-controls={{listboxId}}
       placeholder={{searchPlaceholder}}
       oninput={{handleInput}}

app/styles/ember-power-select.scss

@@ -113,19 +113,19 @@ $ember-basic-dropdown-content-background-color: $ember-power-select-background-c
 // Search bar
 .ember-power-select-search {
   padding: 4px;
-  input {
-    border: $ember-power-select-search-field-border;
-    border-radius: $ember-power-select-search-input-border-radius;
-    width: 100%;
-    font-size: inherit;
-    line-height: inherit;
-    padding: 0 5px;
-    &:focus {
-      border: $ember-power-select-search-field-focus-border;
-      box-shadow: $ember-power-select-focus-box-shadow;
-      @if $ember-power-select-focus-outline {
-        outline: $ember-power-select-focus-outline;
-      }
+}
+.ember-power-select-search-input {
+  border: $ember-power-select-search-field-border;
+  border-radius: $ember-power-select-search-input-border-radius;
+  width: 100%;
+  font-size: inherit;
+  line-height: inherit;
+  padding: 0 5px;
+  &:focus {
+    border: $ember-power-select-search-field-focus-border;
+    box-shadow: $ember-power-select-focus-box-shadow;
+    @if $ember-power-select-focus-outline {
+      outline: $ember-power-select-focus-outline;
     }
   }
 }

test-support/helpers/ember-power-select.js

@@ -3,7 +3,7 @@ import Ember from 'ember';
 // Helpers for integration tests
 
 function typeText(selector, text) {
-  let $selector = $(selector);
+  let $selector = $($(selector).get(0)); // Only interact with the first result
   $selector.val(text);
   let event = document.createEvent('Events');
   event.initEvent('input', true, true);
@@ -49,7 +49,7 @@ export function triggerKeydown(domElement, k) {
 
 export function typeInSearch(text) {
   Ember.run(() => {
-    typeText('.ember-power-select-search input, .ember-power-select-trigger-multiple-input', text);
+    typeText('.ember-power-select-search-input, .ember-power-select-search input, .ember-power-select-trigger-multiple-input, input[type="search"]', text);
   });
 }
 
@@ -118,17 +118,17 @@ export default function() {
       nativeMouseDown(`${cssPath} .ember-power-select-trigger`);
       wait();
     }
-    const isDefaultSingleSelect = Ember.$(`.ember-power-select-search input`).length > 0;
+    const isDefaultSingleSelect = Ember.$(`.ember-power-select-search-input`).length > 0;
 
     if (isMultipleSelect) {
       fillIn(`${cssPath} .ember-power-select-trigger-multiple-input`, value);
       if (isEmberOne) {
         triggerEvent(`${cssPath} .ember-power-select-trigger-multiple-input`, 'input');
       }
     } else if (isDefaultSingleSelect) {
-      fillIn('.ember-power-select-search input', value);
+      fillIn('.ember-power-select-search-input', value);
       if (isEmberOne) {
-        triggerEvent(`.ember-power-select-dropdown-ember${id} .ember-power-select-search input`, 'input');
+        triggerEvent(`.ember-power-select-dropdown-ember${id} .ember-power-select-search-input`, 'input');
       }
     } else { // It's probably a customized version
       let inputIsInTrigger = !!find(`${cssPath} .ember-power-select-trigger input[type=search]`)[0];
@@ -138,9 +138,9 @@ export default function() {
           triggerEvent(`${cssPath} .ember-power-select-trigger input[type=search]`, 'input');
         }
       } else {
-        fillIn(`.ember-power-select-dropdown-ember${id} .ember-power-select-search input[type=search]`, 'input');
+        fillIn(`.ember-power-select-dropdown-ember${id} .ember-power-select-search-input[type=search]`, 'input');
         if (isEmberOne) {
-          triggerEvent(`.ember-power-select-dropdown-ember${id} .ember-power-select-search input[type=search]`, 'input');
+          triggerEvent(`.ember-power-select-dropdown-ember${id} .ember-power-select-search-input[type=search]`, 'input');
         }
       }
     }

tests/dummy/app/styles/app.scss

@@ -297,14 +297,14 @@
       border-bottom: 1px solid #ccc;
       border-top-left-radius: 4px;
       border-top-right-radius: 4px; }
-  .ember-power-select-search input {
+  .ember-power-select-search-input {
     border: 1px solid #ccc;
     border-radius: 3px;
     width: 100%;
     font-size: inherit;
     line-height: inherit;
     padding: 0 5px; }
-    .ember-power-select-search input:focus {
+    .ember-power-select-search-input:focus {
       border: 1px solid #66afe9;
       box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
       outline: 0; }

tests/dummy/app/templates/public-pages/docs/troubleshooting.hbs

@@ -57,8 +57,8 @@
   to 2.0+ you must trigger an <code>input</code> event after the filling the search box.
 
   <pre>
-    fillIn('.ember-power-select-search input', 'foo');
-    triggerEvent('.ember-power-select-search input', 'input');
+    fillIn('.ember-power-select-search-input', 'foo');
+    triggerEvent('.ember-power-select-search-input', 'input');
 
     andThen(() => {
       // Do your assertions

tests/integration/components/power-select/a11y-test.js

@@ -115,7 +115,7 @@ test('Single-select: The highlighted option has `aria-current=true` and the rest
   clickTrigger();
   assert.equal($('.ember-power-select-option:contains("one")').attr('aria-current'), 'true', 'the highlighted option has aria-current=true');
   assert.equal($('.ember-power-select-option[aria-current="false"]').length, numbers.length - 1, 'All other options have aria-current=false');
-  triggerKeydown($('.ember-power-select-search input')[0], 40);
+  triggerKeydown($('.ember-power-select-search-input')[0], 40);
   assert.equal($('.ember-power-select-option:contains("one")').attr('aria-current'), 'false', 'the first option has now aria-current=false');
   assert.equal($('.ember-power-select-option:contains("two")').attr('aria-current'), 'true', 'the second option has now aria-current=false');
 });
@@ -133,7 +133,7 @@ test('Multiple-select: The highlighted option has `aria-current=true` and the re
   clickTrigger();
   assert.equal($('.ember-power-select-option:contains("one")').attr('aria-current'), 'true', 'the highlighted option has aria-current=true');
   assert.equal($('.ember-power-select-option[aria-current="false"]').length, numbers.length - 1, 'All other options have aria-current=false');
-  triggerKeydown($('.ember-power-select-search input')[0], 40);
+  triggerKeydown($('.ember-power-select-search-input')[0], 40);
   assert.equal($('.ember-power-select-option:contains("one")').attr('aria-current'), 'false', 'the first option has now aria-current=false');
   assert.equal($('.ember-power-select-option:contains("two")').attr('aria-current'), 'true', 'the second option has now aria-current=false');
 });
@@ -271,8 +271,8 @@ test('Single-select: The searchbox has type `search` and `aria-controls=<id-of-l
   `);
 
   clickTrigger();
-  assert.equal($('.ember-power-select-search input').attr('type'), 'search', 'The type of the input is `search`');
-  assert.ok(/^ember-power-select-options-ember\d+$/.test($('.ember-power-select-search input').attr('aria-controls')), 'The `aria-controls` points to the id of the listbox');
+  assert.equal($('.ember-power-select-search-input').attr('type'), 'search', 'The type of the input is `search`');
+  assert.ok(/^ember-power-select-options-ember\d+$/.test($('.ember-power-select-search-input').attr('aria-controls')), 'The `aria-controls` points to the id of the listbox');
 });
 
 test('Multiple-select: The searchbox has type `search` and `aria-controls=<id-of-listbox>`', function(assert) {

tests/integration/components/power-select/custom-search-test.js

@@ -290,15 +290,15 @@ test('Closing a component with a custom search cleans the search box and the res
   clickTrigger();
   typeInSearch("teen");
   assert.equal($('.ember-power-select-option').length, 7, 'Results are filtered');
-  assert.equal($('.ember-power-select-search input').val(), 'teen');
+  assert.equal($('.ember-power-select-search-input').val(), 'teen');
   Ember.run(() => {
     let event = new window.Event('mousedown');
     this.$('#different-node')[0].dispatchEvent(event);
   });
   clickTrigger();
   assert.equal($('.ember-power-select-option').length, 1, 'Results have been cleared');
   assert.equal($('.ember-power-select-option').text().trim(), 'Type to search');
-  assert.equal($('.ember-power-select-search input').val(), '', 'The searchbox was cleared');
+  assert.equal($('.ember-power-select-search-input').val(), '', 'The searchbox was cleared');
 });
 
 test('When received both options and search, those options are shown when the dropdown opens before the first search is performed', function(assert) {

tests/integration/components/power-select/customization-with-compoments-test.js

@@ -75,7 +75,7 @@ test('the content before the list can be customized passing `beforeOptionsCompon
 
   clickTrigger();
   assert.equal($('.ember-power-select-dropdown #custom-before-options-p-tag').length, 1, 'The custom component is rendered instead of the usual search bar');
-  assert.equal($('.ember-power-select-search input').length, 0, 'The search input is not visible');
+  assert.equal($('.ember-power-select-search-input').length, 0, 'The search input is not visible');
 });
 
 test('the content after the list can be customized passing `afterOptionsComponent`', function(assert) {
@@ -92,7 +92,7 @@ test('the content after the list can be customized passing `afterOptionsComponen
 
   clickTrigger();
   assert.equal($('.ember-power-select-dropdown #custom-after-options-p-tag').length, 1, 'The custom component is rendered instead of the usual search bar');
-  assert.equal($('.ember-power-select-search input').length, 1, 'The search input is still visible');
+  assert.equal($('.ember-power-select-search-input').length, 1, 'The search input is still visible');
 });
 
 test('the `beforeOptionsComponent` and `afterOptionsComponent` receive the `extra` hash', function(assert) {

tests/integration/components/power-select/disabled-test.js

@@ -64,8 +64,8 @@ test('Disabled options are skipped when highlighting items with the keyboard', f
   `);
 
   clickTrigger();
-  triggerKeydown($('.ember-power-select-search input')[0], 40);
-  triggerKeydown($('.ember-power-select-search input')[0], 40);
+  triggerKeydown($('.ember-power-select-search-input')[0], 40);
+  triggerKeydown($('.ember-power-select-search-input')[0], 40);
   assert.ok($('.ember-power-select-option[aria-current="true"]').text().trim(), 'LV: Latvia' ,'The hovered option was not highlighted because it\'s disabled');
 });
 
@@ -110,7 +110,7 @@ test('BUGFIX: When after a search the only result is a disabled element, it isn\
   clickTrigger();
   typeInSearch("Br");
   assert.equal($('.ember-power-select-option[aria-current="true"]').length, 0, 'Nothing is highlighted');
-  triggerKeydown($('.ember-power-select-search input')[0], 13);
+  triggerKeydown($('.ember-power-select-search-input')[0], 13);
   assert.equal($('.ember-power-select-dropdown').length, 0, 'The select is closed');
   assert.equal($('.ember-power-select-trigger').text().trim(), '', 'Nothing was selected');
 });

tests/integration/components/power-select/general-behaviour-test.js

@@ -87,7 +87,7 @@ test('The search box gain focus automatically when opened', function(assert) {
   `);
 
   clickTrigger();
-  assert.ok($('.ember-power-select-search input').get(0) === document.activeElement, 'The search box is focused after opening select');
+  assert.ok($('.ember-power-select-search-input').get(0) === document.activeElement, 'The search box is focused after opening select');
 });
 
 test('Each option of the select is the result of yielding an item', function(assert) {
@@ -258,7 +258,7 @@ test('If the user passes `closeOnSelect=false` the dropdown remains visible afte
   clickTrigger();
   assert.equal($('.ember-power-select-dropdown').length, 1, 'Dropdown is rendered');
   nativeMouseUp('.ember-power-select-option:eq(3)');
-  triggerKeydown($('.ember-power-select-search input')[0], 13);
+  triggerKeydown($('.ember-power-select-search-input')[0], 13);
   assert.equal($('.ember-power-select-trigger').text().trim(), 'four', '"four" has been selected');
   assert.equal($('.ember-power-select-dropdown').length, 1, 'Dropdown is rendered');
 });
@@ -332,7 +332,7 @@ test('If the content of the selected is refreshed while opened the first element
     {{/power-select}}
   `);
   clickTrigger();
-  triggerKeydown($('.ember-power-select-search input')[0], 40);
+  triggerKeydown($('.ember-power-select-search-input')[0], 40);
   assert.equal($('.ember-power-select-option[aria-current="true"]').text().trim(), 'two', 'The second options is highlighted');
   Ember.run(() => this.set('numbers', ['foo', 'bar', 'baz']));
   assert.equal($('.ember-power-select-option[aria-current="true"]').text().trim(), 'foo', 'The first element is highlighted');
@@ -734,7 +734,7 @@ test('BUGFIX: The highlighted element is reset when single selects are closed',
 
   clickTrigger();
   assert.equal($('.ember-power-select-option[aria-current="true"]').text().trim(), 'three', 'The third element is highlighted');
-  triggerKeydown($('.ember-power-select-search input')[0], 40);
+  triggerKeydown($('.ember-power-select-search-input')[0], 40);
   assert.equal($('.ember-power-select-option[aria-current="true"]').text().trim(), 'four', 'The forth element is highlighted');
   clickTrigger();
   clickTrigger();
@@ -996,7 +996,7 @@ test('When the input inside the select gets focused the entire component gains t
 
   assert.ok(!this.$('.ember-power-select').hasClass('ember-basic-dropdown--focus-inside'), 'The select doesn\'t have the class yet');
   clickTrigger();
-  Ember.run(() => $('.ember-power-select-search input').focus());
+  Ember.run(() => $('.ember-power-select-search-input').focus());
   assert.ok(this.$('.ember-power-select').hasClass('ember-basic-dropdown--focus-inside'), 'The select has the class now');
 });
 

tests/integration/components/power-select/keyboard-control-test.js

@@ -20,7 +20,7 @@ test('Pressing keydown highlights the next option', function(assert) {
 
   clickTrigger();
   assert.equal($('.ember-power-select-option[aria-current="true"]').text().trim(), 'one');
-  triggerKeydown($('.ember-power-select-search input')[0], 40);
+  triggerKeydown($('.ember-power-select-search-input')[0], 40);
   assert.equal($('.ember-power-select-option[aria-current="true"]').text().trim(), 'two', 'The next options is highlighted now');
 });
 
@@ -36,7 +36,7 @@ test('Pressing keyup highlights the previous option', function(assert) {
 
   clickTrigger();
   assert.equal($('.ember-power-select-option[aria-current="true"]').text().trim(), 'three');
-  triggerKeydown($('.ember-power-select-search input')[0], 38);
+  triggerKeydown($('.ember-power-select-search-input')[0], 38);
   assert.equal($('.ember-power-select-option[aria-current="true"]').text().trim(), 'two', 'The previous options is highlighted now');
 });
 
@@ -53,7 +53,7 @@ test('When you the last option is highlighted, pressing keydown doesn\'t change
 
   clickTrigger();
   assert.equal($('.ember-power-select-option[aria-current="true"]').text().trim(), 'twenty');
-  triggerKeydown($('.ember-power-select-search input')[0], 40);
+  triggerKeydown($('.ember-power-select-search-input')[0], 40);
   assert.equal($('.ember-power-select-option[aria-current="true"]').text().trim(), 'twenty', 'The last option is still the highlighted one');
 });
 
@@ -70,7 +70,7 @@ test('When you the first option is highlighted, pressing keyup doesn\'t change t
 
   clickTrigger();
   assert.equal($('.ember-power-select-option[aria-current="true"]').text().trim(), 'one');
-  triggerKeydown($('.ember-power-select-search input')[0], 38);
+  triggerKeydown($('.ember-power-select-search-input')[0], 38);
   assert.equal($('.ember-power-select-option[aria-current="true"]').text().trim(), 'one', 'The first option is still the highlighted one');
 });
 
@@ -87,7 +87,7 @@ test('The arrow keys also scroll the list if the new highlighted element if it i
   clickTrigger();
   assert.equal($('.ember-power-select-option[aria-current="true"]').text().trim(), 'seven');
   assert.equal($('.ember-power-select-options')[0].scrollTop, 0, 'The list is not scrolled');
-  triggerKeydown($('.ember-power-select-search input')[0], 40);
+  triggerKeydown($('.ember-power-select-search-input')[0], 40);
   assert.equal($('.ember-power-select-option[aria-current="true"]').text().trim(), 'eight', 'The next option is highlighted now');
   assert.ok($('.ember-power-select-options')[0].scrollTop > 0, 'The list has scrolled');
 });
@@ -109,8 +109,8 @@ test('Pressing ENTER selects the highlighted element, closes the dropdown and fo
   `);
 
   clickTrigger();
-  triggerKeydown($('.ember-power-select-search input')[0], 40);
-  triggerKeydown($('.ember-power-select-search input')[0], 13);
+  triggerKeydown($('.ember-power-select-search-input')[0], 40);
+  triggerKeydown($('.ember-power-select-search-input')[0], 13);
   assert.equal($('.ember-power-select-trigger').text().trim(), 'two', 'The highlighted element was selected');
   assert.equal($('.ember-power-select-dropdown').length, 0, 'The dropdown is closed');
   assert.ok($('.ember-power-select-trigger').get(0) === document.activeElement, 'The trigger is focused');
@@ -155,7 +155,7 @@ test('Pressing ENTER when there is no highlighted element, closes the dropdown a
   clickTrigger();
   typeInSearch('asjdnah');
   assert.equal($('.ember-power-select-option:eq(0)').text().trim(), 'No results found');
-  triggerKeydown($('.ember-power-select-search input')[0], 13);
+  triggerKeydown($('.ember-power-select-search-input')[0], 13);
   assert.equal($('.ember-power-select-dropdown').length, 0, 'The dropdown is closed');
   assert.ok($('.ember-power-select-trigger').get(0) === document.activeElement, 'The trigger is focused');
 });
@@ -195,8 +195,8 @@ test('Pressing TAB closes the select WITHOUT selecting the highlighed element an
   `);
 
   clickTrigger();
-  triggerKeydown($('.ember-power-select-search input')[0], 40);
-  triggerKeydown($('.ember-power-select-search input')[0], 9);
+  triggerKeydown($('.ember-power-select-search-input')[0], 40);
+  triggerKeydown($('.ember-power-select-search-input')[0], 9);
   assert.equal($('.ember-power-select-trigger').text().trim(), '', 'The highlighted element wasn\'t selected');
   assert.equal($('.ember-power-select-dropdown').length, 0, 'The dropdown is closed');
   assert.ok($('.ember-power-select-trigger').get(0) === document.activeElement, 'The trigges is focused');
@@ -322,7 +322,7 @@ test('In single-mode, when the user presses a key being the search input focused
 
   clickTrigger();
   assert.equal($('.ember-power-select-dropdown').length, 1, 'The select is opened');
-  triggerKeydown($('.ember-power-select-search input')[0], 13);
+  triggerKeydown($('.ember-power-select-search-input')[0], 13);
   assert.equal($('.ember-power-select-dropdown').length, 0, 'The select is closed');
 });
 
@@ -343,7 +343,7 @@ test('in single-mode if the users calls preventDefault on the event received in
 
   clickTrigger();
   assert.equal($('.ember-power-select-dropdown').length, 1, 'The select is opened');
-  triggerKeydown($('.ember-power-select-search input')[0], 13);
+  triggerKeydown($('.ember-power-select-search-input')[0], 13);
   assert.equal($('.ember-power-select-dropdown').length, 1, 'The select is still opened');
 });