Merge pull request #779 from cibernox/is-equal

[FEATURE] If options implement the `isEqual` method, EPS will use it

addon/components/power-select-multiple.js

@@ -1,8 +1,11 @@
+import Ember from 'ember';
 import Component from 'ember-component';
 import computed from 'ember-computed';
 import layout from '../templates/components/power-select-multiple';
 import fallbackIfUndefined from '../utils/computed-fallback-if-undefined';
 
+const { isEqual } = Ember;
+
 export default Component.extend({
   layout,
   // Config
@@ -81,7 +84,13 @@ export default Component.extend({
 
     buildSelection(option, select) {
       let newSelection = (select.selected || []).slice(0);
-      let idx = newSelection.indexOf(option);
+      let idx = -1;
+      for (let i = 0; i < newSelection.length; i++) {
+        if (isEqual(newSelection[i], option)) {
+          idx = i;
+          break;
+        }
+      }
       if (idx > -1) {
         newSelection.splice(idx, 1);
       } else {

addon/components/power-select.js

@@ -1,3 +1,4 @@
+import Ember from 'ember';
 import Component from 'ember-component';
 import layout from '../templates/components/power-select';
 import fallbackIfUndefined from '../utils/computed-fallback-if-undefined';
@@ -19,6 +20,8 @@ import {
 } from '../utils/group-utils';
 import { task, timeout } from 'ember-concurrency';
 
+const { isEqual } = Ember;
+
 // Copied from Ember. It shouldn't be necessary in Ember 2.5+
 const assign = Object.assign || function EmberAssign(original, ...args) {
   for (let i = 0; i < args.length; i++) {
@@ -248,7 +251,7 @@ export default Component.extend({
 
     select(selected /* , e */) {
       let publicAPI = this.get('publicAPI');
-      if (publicAPI.selected !== selected) {
+      if (!isEqual(publicAPI.selected, selected)) {
         this.get('onchange')(selected, publicAPI);
       }
     },

addon/helpers/ember-power-select-is-selected.js

@@ -1,9 +1,24 @@
+import Ember from 'ember';
 import { helper } from 'ember-helper';
 import { isEmberArray } from 'ember-array/utils';
 
+const { isEqual } = Ember;
+
 // TODO: Make it private or scoped to the component
 export function emberPowerSelectIsSelected([option, selected]/* , hash*/) {
-  return isEmberArray(selected) ? selected.indexOf(option) > -1 : option === selected;
+  if (selected === undefined || selected === null) {
+    return false;
+  }
+  if (isEmberArray(selected)) {
+    for (let i = 0; i < selected.length; i++) {
+      if (isEqual(selected[i], option)) {
+        return true;
+      }
+    }
+    return false;
+  } else {
+    return isEqual(option, selected);
+  }
 }
 
 export default helper(emberPowerSelectIsSelected);

package.json

@@ -55,7 +55,7 @@
     "ember-disable-prototype-extensions": "^1.1.0",
     "ember-export-application-global": "^1.0.5",
     "ember-fastboot-test-helpers": "0.1.1",
-    "ember-href-to": "1.7.0",
+    "ember-href-to": "1.11.0",
     "ember-load-initializers": "^0.6.0",
     "ember-pagefront": "0.10.10",
     "ember-resolver": "^2.0.3",
@@ -79,7 +79,7 @@
     "ember-cli-htmlbars": "^1.1.1",
     "ember-concurrency": "^0.7.15",
     "ember-text-measurer": "^0.3.3",
-    "ember-truth-helpers": "^1.2.0"
+    "ember-truth-helpers": "^1.3.0"
   },
   "ember-addon": {
     "configPath": "tests/dummy/config",

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

@@ -10,7 +10,7 @@ import {
   countries
 } from '../constants';
 
-const { RSVP } = Ember;
+const { RSVP, Object: eObject, get } = Ember;
 
 moduleForComponent('power-select', 'Integration | Component | Ember Power Select (General behavior)', {
   integration: true
@@ -1115,3 +1115,39 @@ test('the item that is highlighted by default can be customized passing a functi
   assert.equal($('.ember-power-select-dropdown').length, 1, 'Dropdown is rendered');
   assert.equal($('.ember-power-select-option[aria-current=true]').text().trim(), 'five', 'the given element is highlighted instead of the first, as usual');
 });
+
+test('If the options of a single select implement `isEqual`, that option is used to determine whether or not two items are the same', function(assert) {
+  let User = eObject.extend({
+    isEqual(other) {
+      return get(this, 'name') === get(other, 'name');
+    }
+  });
+
+  this.search = (term) => {
+    return names.filter((n) => n.indexOf(term) > -1).map((name) => User.create({ name }));
+  };
+
+  let onChangeInvocationsCount = 0;
+  this.onChance = (selected) => {
+    onChangeInvocationsCount++;
+    this.set('selected', selected);
+  };
+
+  this.render(hbs`
+    {{#power-select
+      selected=selected
+      onchange=onChance
+      search=search as |user|}}
+      {{user.name}}
+    {{/power-select}}
+  `);
+
+  clickTrigger();
+  typeInSearch('M');
+  nativeMouseUp('.ember-power-select-option:eq(1)');
+  clickTrigger();
+  typeInSearch('i');
+  assert.equal($('.ember-power-select-option:eq(0)').attr('aria-selected'), 'true', 'The item in the list is marked as selected');
+  nativeMouseUp('.ember-power-select-option:eq(0)'); // select the same user again
+  assert.equal(onChangeInvocationsCount, 1);
+});

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

@@ -3,9 +3,9 @@ import $ from 'jquery';
 import { moduleForComponent, test } from 'ember-qunit';
 import hbs from 'htmlbars-inline-precompile';
 import { typeInSearch, triggerKeydown, clickTrigger, nativeMouseDown, nativeMouseUp } from '../../../helpers/ember-power-select';
-import { numbers, countries } from '../constants';
+import { numbers, names, countries } from '../constants';
 
-const { RSVP } = Ember;
+const { RSVP, Object: eObject, get } = Ember;
 
 moduleForComponent('ember-power-select', 'Integration | Component | Ember Power Select (Multiple)', {
   integration: true
@@ -781,4 +781,32 @@ test('Multiple selects honor the `defaultHighlighted` option', function(assert)
 
   clickTrigger();
   assert.equal($('.ember-power-select-option[aria-current=true]').text().trim(), 'four', 'the given defaultHighlighted element is highlighted instead of the first, as usual');
+});
+
+test('If the options of a multiple select implement `isEqual`, that option is used to determine whether or not two items are the same', function(assert) {
+  let User = eObject.extend({
+    isEqual(other) {
+      return get(this, 'name') === get(other, 'name');
+    }
+  });
+
+  this.search = (term) => {
+    return names.filter((n) => n.indexOf(term) > -1).map((name) => User.create({ name }));
+  };
+
+  this.render(hbs`
+    {{#power-select-multiple
+      selected=selected
+      onchange=(action (mut selected))
+      search=search as |user|}}
+      {{user.name}}
+    {{/power-select-multiple}}
+  `);
+
+  typeInSearch('M');
+  nativeMouseUp('.ember-power-select-option:eq(1)');
+  typeInSearch('Mi');
+  assert.equal($('.ember-power-select-option:eq(0)').attr('aria-selected'), 'true', 'The item in the list is marked as selected');
+  nativeMouseUp('.ember-power-select-option:eq(0)'); // select the same user again should remove it
+  assert.equal(this.$('.ember-power-select-multiple-option').length, 0);
 });