feat(ac): respect dropdownClass just like e-p-s (#868)

addon/components/paper-autocomplete.js

@@ -25,28 +25,33 @@ export default PowerSelect.extend(ValidationMixin, ChildMixin, {
   contentComponent: 'paper-autocomplete-content',
   optionsComponent: 'paper-autocomplete-options',
   triggerWrapperComponent: 'paper-autocomplete-trigger-container',
-
-  concatenatedDropdownClasses: ['md-autocomplete-suggestions-container md-virtual-repeat-container'],
-
-  extra: computed('labelPath', 'label', function() {
-    return this.getProperties('label', 'labelPath');
-  }),
   onfocus: computed.alias('onFocus'),
   onblur: computed.alias('onBlur'),
   onchange: null,
   oninput: null,
+  searchText: '',
+  defaultHighlighted: null, // Don't automatically highlight any option
+  _onChangeNop() { },
+
+  extra: computed('labelPath', 'label', function() {
+    return this.getProperties('label', 'labelPath');
+  }),
+
   validationProperty: computed('onSearchTextChange', 'onSelectionChange', function() {
     if (this.get('onSearchTextChange')) {
       return 'searchText';
     } else {
       return 'selected';
     }
   }),
-  searchText: '',
-  _onChangeNop() { },
 
-  // Don't automatically highlight any option
-  defaultHighlighted: null,
+  concatenatedDropdownClasses: computed('dropdownClass', function() {
+    let classes = ['md-autocomplete-suggestions-container md-virtual-repeat-container dude'];
+    if (this.get('dropdownClass')) {
+      classes.push(this.get('dropdownClass'));
+    }
+    return classes.join(' ');
+  }),
 
   init() {
     this._initComponent();

addon/templates/components/paper-autocomplete-content.hbs

@@ -1,15 +1,12 @@
 {{#if dropdown.isOpen}}
   {{#ember-wormhole to=destination renderInPlace=renderInPlace}}
-    {{!--
-      Not really needed anymore - EPS does a good job of managing dropdown position
-      including destination scroll offset.
-      This remove double click issue when trying to focus another element while
-      autocomplete is open.
-     {{paper-backdrop class="md-click-catcher"}}
-     --}}
     {{#paper-virtual-repeat (readonly select.results)
       id=(readonly dropdownId)
-      class=(concat dropdownId " md-autocomplete-suggestions-container" " ember-basic-dropdown-content " (if renderInPlace 'ember-basic-dropdown-content--in-place ') (if hPosition (concat 'ember-basic-dropdown-content--' hPosition ' ')) (if vPosition (concat 'ember-basic-dropdown-content--' vPosition ' ') "md-whiteframe-z1 ") animationClass)
+      class=(concat class " ember-basic-dropdown-content "
+        (if renderInPlace 'ember-basic-dropdown-content--in-place ')
+        (if hPosition (concat 'ember-basic-dropdown-content--' hPosition ' '))
+        (if vPosition (concat 'ember-basic-dropdown-content--' vPosition ' ') "md-whiteframe-z1 ")
+        animationClass)
       containerSelector='.md-autocomplete-suggestions'
       scrollIndex=(readonly select.scrollIndex)
       positionCoordinates=(hash top=top left=left right=right width=width)

testem.js

@@ -1,15 +1,15 @@
 /* eslint-env node */
 module.exports = {
-  "test_page": "tests/index.html?hidepassed",
-  "disable_watching": true,
-  "launch_in_ci": [
-    "Chrome"
+  test_page: 'tests/index.html?hidepassed',
+  disable_watching: true,
+  launch_in_ci: [
+    'Chrome'
   ],
-  "launch_in_dev": [
-    "Chrome"
+  launch_in_dev: [
+    'Chrome'
   ],
-  'browser_args': {
-    'Chrome': [
+  browser_args: {
+    Chrome: [
       '--touch-events',
       '--disable-gpu',
       '--headless',

tests/integration/components/paper-autocomplete-test.js

@@ -57,7 +57,6 @@ moduleForComponent('paper-autcomplete', 'Integration | Component | paper autocom
 
 test('opens on click', function(assert) {
   assert.expect(1);
-  this.appRoot = document.querySelector('#ember-testing');
   this.set('items', ['Ember', 'Paper', 'One', 'Two', 'Three', 'Four', 'Five', 'Six', 'Seven', 'Eight', 'Nine', 'Ten', 'Eleven', 'Twelve']);
   this.render(hbs`{{#paper-autocomplete
     placeholder="Item"
@@ -83,7 +82,6 @@ test('opens on click', function(assert) {
 
 test('backdrop removed if select closed', function(assert) {
   assert.expect(2);
-  this.appRoot = document.querySelector('#ember-testing');
   this.set('items', ['Ember', 'Paper', 'One', 'Two', 'Three', 'Four', 'Five', 'Six', 'Seven', 'Eight', 'Nine', 'Ten', 'Eleven', 'Twelve']);
   this.render(hbs`
     <div id="other-div"></div>
@@ -118,7 +116,6 @@ test('backdrop removed if select closed', function(assert) {
 
 test('should render only enough items to fill the menu + 3', function(assert) {
   assert.expect(2);
-  this.appRoot = document.querySelector('#ember-testing');
   this.set('items', ['Ember', 'Paper', 'One', 'Two', 'Three', 'Four', 'Five', 'Six', 'Seven', 'Eight', 'Nine', 'Ten', 'Eleven', 'Twelve']);
   this.render(hbs`{{#paper-autocomplete
     placeholder="Item"
@@ -145,7 +142,6 @@ test('should render only enough items to fill the menu + 3', function(assert) {
 
 test('should filter list by search term', function(assert) {
   assert.expect(3);
-  this.appRoot = document.querySelector('#ember-testing');
   this.set('items', ['Ember', 'Paper', 'One', 'Two', 'Three', 'Four', 'Five', 'Six', 'Seven', 'Eight', 'Nine', 'Ten', 'Eleven', 'Twelve']);
   this.render(hbs`{{#paper-autocomplete
     placeholder="Item"
@@ -238,8 +234,8 @@ test('when has selection and searchText changed, the dropdown is shown with w/o
 test('we can highlight search results for properties that aren\'t text', function(assert) {
   assert.expect(2);
 
-  this.set('items', ['1', '2', '3', '4']);
-  this.set('selectedItem', 1);
+  this.items = ['1', '2', '3', '4'];
+  this.selectedItem = 1;
   this.render(hbs`{{#paper-autocomplete
     placeholder="Item"
     options=items
@@ -271,3 +267,26 @@ test('we can highlight search results for properties that aren\'t text', functio
     assert.equal(this.get('selectedItem'), undefined, 'selectedItem is undefined');
   });
 });
+
+test('dropdown can be customized using dropdownClass', function(assert) {
+  assert.expect(1);
+  this.items = ['1', '2', '3'];
+  this.render(hbs`{{#paper-autocomplete
+    dropdownClass="custom-dropdown-class"
+    placeholder="Item"
+    options=items
+    selected=selectedItem
+    onSelectionChange=(action (mut selectedItem))
+    as |item|
+  }}
+    {{item}}
+  {{/paper-autocomplete}}`);
+
+  return wait().then(() => {
+    $('md-autocomplete-wrap input')[0].focus();
+    return wait().then(() => {
+      let ddContainer = $('.md-autocomplete-suggestions-container.custom-dropdown-class');
+      assert.ok(ddContainer.length, 'contains custom dropdownClass');
+    });
+  });
+});