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',
+ );
+ });
},
);