Merge pull request #1637 from rogeraraujo90/master

Allow to highlight an object option without use the same reference

ember-power-select/package.json

@@ -166,8 +166,8 @@
       "./components/power-select/power-select-group.js": "./dist/_app_/components/power-select/power-select-group.js",
       "./components/power-select/search-message.js": "./dist/_app_/components/power-select/search-message.js",
       "./components/power-select/trigger.js": "./dist/_app_/components/power-select/trigger.js",
+      "./helpers/ember-power-select-is-equal.js": "./dist/_app_/helpers/ember-power-select-is-equal.js",
       "./helpers/ember-power-select-is-group.js": "./dist/_app_/helpers/ember-power-select-is-group.js",
-      "./helpers/ember-power-select-is-selected.js": "./dist/_app_/helpers/ember-power-select-is-selected.js",
       "./test-support/helpers.js": "./dist/_app_/test-support/helpers.js",
       "./utils/computed-fallback-if-undefined.js": "./dist/_app_/utils/computed-fallback-if-undefined.js",
       "./utils/group-utils.js": "./dist/_app_/utils/group-utils.js"

ember-power-select/src/components/power-select/options.hbs

@@ -4,9 +4,9 @@
       <li class="ember-power-select-option ember-power-select-option--loading-message" role="option" aria-selected={{false}}>{{@loadingMessage}}</li>
     {{/if}}
   {{/if}}
-  {{#let 
-    (component (ensure-safe-component @groupComponent)) 
-    (component (ensure-safe-component @optionsComponent)) 
+  {{#let
+    (component (ensure-safe-component @groupComponent))
+    (component (ensure-safe-component @optionsComponent))
   as |Group Options|}}
     {{#each @options as |opt index|}}
       {{#if (ember-power-select-is-group opt)}}
@@ -26,9 +26,9 @@
       {{else}}
         <li class="ember-power-select-option"
           id="{{@select.uniqueId}}-{{@groupIndex}}{{index}}"
-          aria-selected="{{ember-power-select-is-selected opt @select.selected}}"
+          aria-selected="{{ember-power-select-is-equal opt @select.selected}}"
           aria-disabled={{if opt.disabled "true"}}
-          aria-current="{{eq opt @select.highlighted}}"
+          aria-current="{{ember-power-select-is-equal opt @select.highlighted}}"
           data-option-index="{{@groupIndex}}{{index}}"
           role="option">
           {{yield opt @select}}

ember-power-select/src/helpers/ember-power-select-is-selected.ts → ember-power-select/src/helpers/ember-power-select-is-equal.ts

@@ -3,7 +3,7 @@ import { isArray as isEmberArray } from '@ember/array';
 import { isEqual } from '@ember/utils';
 
 // TODO: Make it private or scoped to the component
-export function emberPowerSelectIsSelected(
+export function emberPowerSelectIsEqual(
   [option, selected]: [any, any] /* , hash*/,
 ): boolean {
   if (selected === undefined || selected === null) {
@@ -21,4 +21,4 @@ export function emberPowerSelectIsSelected(
   }
 }
 
-export default helper(emberPowerSelectIsSelected);
+export default helper(emberPowerSelectIsEqual);

ember-power-select/src/utils/group-utils.ts

@@ -1,4 +1,5 @@
 import { A } from '@ember/array';
+import { isEqual } from '@ember/utils';
 
 export type MatcherFn = (option: any, text: string) => number;
 export function isGroup(entry: any): boolean {
@@ -40,7 +41,7 @@ export function indexOfOption(collection: any, option: any): number {
         if (result > -1) {
           return result;
         }
-      } else if (entry === option) {
+      } else if (isEqual(entry, option)) {
         return index;
       } else {
         index++;
@@ -64,7 +65,7 @@ export function pathForOption(collection: any, option: any): string {
         if (result.length > 0) {
           return i + '.' + result;
         }
-      } else if (entry === option) {
+      } else if (isEqual(entry, option)) {
         return i + '';
       }
     }

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

@@ -1387,7 +1387,7 @@ module(
         }
 
         isEqual(other) {
-          return this.name === other.name;
+          return this.name === other?.name;
         }
       }
 

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

@@ -1139,7 +1139,7 @@ module(
         }
 
         isEqual(other) {
-          return this.name === other.name;
+          return this.name === other?.name;
         }
       }
 

test-app/tests/integration/components/power-select/public-actions-test.js

@@ -6,8 +6,9 @@ import {
   clickTrigger,
   typeInSearch,
 } from 'ember-power-select/test-support/helpers';
-import { numbers } from '../constants';
+import { names, numbers } from '../constants';
 import { run } from '@ember/runloop';
+import { tracked } from '@glimmer/tracking';
 
 function assertPublicAPIShape(assert, select) {
   assert.strictEqual(
@@ -849,5 +850,71 @@ module(
 
       run(() => this.selectAPI.actions.scrollTo('three'));
     });
+
+    test('The programmer can use the received public API to highlight an option', async function (assert) {
+      this.numbers = numbers;
+      const highlightedOption = numbers[1];
+      this.highlightOption = (select) => {
+        select.actions.highlight(highlightedOption);
+      };
+
+      await render(hbs`
+      <PowerSelectMultiple @options={{this.numbers}} @selected={{this.foo}} @onOpen={{this.highlightOption}} @onChange={{fn (mut this.foo)}} @searchEnabled={{true}} as |number|>
+        {{number}}
+      </PowerSelectMultiple>
+    `);
+
+      await clickTrigger();
+
+      assert
+        .dom('[aria-current="true"]')
+        .hasText(
+          highlightedOption,
+          'The current option is the one highlighted programmatically',
+        );
+    });
+
+    test('if the options of a single select implement `isEqual`, it is possible to highlight it programmatically', async function (assert) {
+      class User {
+        @tracked name;
+
+        constructor(name) {
+          this.name = name;
+        }
+
+        isEqual(other) {
+          return this.name === other?.name;
+        }
+      }
+
+      const users = names.map((name) => new User(name));
+      const highlightedOption = users[1];
+
+      this.users = users;
+      this.highlightOption = (select) => {
+        select.actions.highlight(new User(highlightedOption.name));
+      };
+
+      await render(hbs`
+      <PowerSelect
+        @options={{this.users}}
+        @selected={{this.foo}}
+        @onOpen={{this.highlightOption}}
+        @onChange={{fn (mut this.foo)}}
+        as |user|
+      >
+        {{user.name}}
+      </PowerSelect>
+    `);
+
+      await clickTrigger();
+
+      assert
+        .dom('[aria-current="true"]')
+        .hasText(
+          highlightedOption.name,
+          'The current option is the one highlighted programmatically',
+        );
+    });
   },
 );