import Component from 'ember-component';
import BaseSelectBox from '../../mixins/select-box/base';
import layout from '../../templates/components/select-box/native';
import { A as emberA } from 'ember-array/utils';

export default Component.extend(BaseSelectBox, {
  layout: layout,
  tagName: 'select',
  attributeBindings: ['tabindex', 'disabled', 'size', 'multiple', 'aria-label'],

  change() {
    let options = this._getSelectedOptions();

    if (this.getAttr('multiple')) {
      this.send('select', options.mapBy('value'));
    } else {
      this.send('select', options.get('firstObject.value'));
    }
  },

  _getSelectedOptions() {
    return emberA(this.get('options').filter((option) => {
      return option.$().is(':selected');
    }));
  }
});

@@ -319,16 +319,24 @@
 dings: %5B
+'name', 
 'tabinde

Add `name` to `attributeBindings` of `select-box/native`