diff --git a/ember-power-select/package.json b/ember-power-select/package.json index c51c05cfc..ea3afaec9 100644 --- a/ember-power-select/package.json +++ b/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" diff --git a/ember-power-select/src/components/power-select/options.hbs b/ember-power-select/src/components/power-select/options.hbs index 362cafef3..2fd1f8632 100644 --- a/ember-power-select/src/components/power-select/options.hbs +++ b/ember-power-select/src/components/power-select/options.hbs @@ -4,9 +4,9 @@
  • {{@loadingMessage}}
  • {{/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}}
  • {{yield opt @select}} diff --git a/ember-power-select/src/helpers/ember-power-select-is-selected.ts b/ember-power-select/src/helpers/ember-power-select-is-equal.ts similarity index 85% rename from ember-power-select/src/helpers/ember-power-select-is-selected.ts rename to ember-power-select/src/helpers/ember-power-select-is-equal.ts index 364275dd2..c5afddfc4 100644 --- a/ember-power-select/src/helpers/ember-power-select-is-selected.ts +++ b/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); diff --git a/ember-power-select/src/utils/group-utils.ts b/ember-power-select/src/utils/group-utils.ts index c06e46640..a06cfd1c8 100644 --- a/ember-power-select/src/utils/group-utils.ts +++ b/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 + ''; } } diff --git a/test-app/tests/integration/components/power-select/general-behaviour-test.js b/test-app/tests/integration/components/power-select/general-behaviour-test.js index a93ae4f83..4dd9ac9ea 100644 --- a/test-app/tests/integration/components/power-select/general-behaviour-test.js +++ b/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; } } diff --git a/test-app/tests/integration/components/power-select/multiple-test.js b/test-app/tests/integration/components/power-select/multiple-test.js index b86ea4ace..27f21221f 100644 --- a/test-app/tests/integration/components/power-select/multiple-test.js +++ b/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; } } diff --git a/test-app/tests/integration/components/power-select/public-actions-test.js b/test-app/tests/integration/components/power-select/public-actions-test.js index fe6dfe088..44bedead2 100644 --- a/test-app/tests/integration/components/power-select/public-actions-test.js +++ b/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` + + {{number}} + + `); + + 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` + + {{user.name}} + + `); + + await clickTrigger(); + + assert + .dom('[aria-current="true"]') + .hasText( + highlightedOption.name, + 'The current option is the one highlighted programmatically', + ); + }); }, );