diff --git a/ember-power-select/src/utils/group-utils.ts b/ember-power-select/src/utils/group-utils.ts
index 72a20e7c6..439db9039 100644
--- a/ember-power-select/src/utils/group-utils.ts
+++ b/ember-power-select/src/utils/group-utils.ts
@@ -114,12 +114,13 @@ export function optionAtIndex(
}
export interface Group {
+ groupName: string;
options: any[];
disabled?: boolean;
- groupName: string;
+ [key: string]: unknown;
}
function copyGroup(group: Group, suboptions: any[]): Group {
- const groupCopy: Group = { groupName: group.groupName, options: suboptions };
+ const groupCopy: Group = { ...group, options: suboptions };
if (Object.prototype.hasOwnProperty.call(group, 'disabled')) {
groupCopy.disabled = group.disabled;
}
diff --git a/test-app/app/components/custom-group-component-with-variant.hbs b/test-app/app/components/custom-group-component-with-variant.hbs
new file mode 100644
index 000000000..383f0b318
--- /dev/null
+++ b/test-app/app/components/custom-group-component-with-variant.hbs
@@ -0,0 +1,6 @@
+
+ {{@group.variant}}
+ -
+ {{@group.groupName}}
+
+{{yield}}
\ No newline at end of file
diff --git a/test-app/app/components/custom-group-component-with-variant.ts b/test-app/app/components/custom-group-component-with-variant.ts
new file mode 100644
index 000000000..4bc721dc4
--- /dev/null
+++ b/test-app/app/components/custom-group-component-with-variant.ts
@@ -0,0 +1,16 @@
+import templateOnly from '@ember/component/template-only';
+
+export interface CustomGroupComponentWithVariantSignature {
+ Element: Element;
+ Args: {
+ group: {
+ groupName: string;
+ variant: string;
+ };
+ };
+ Blocks: {
+ default: [];
+ };
+}
+
+export default templateOnly();
diff --git a/test-app/tests/integration/components/constants.js b/test-app/tests/integration/components/constants.js
index 217085113..0c35bff8f 100644
--- a/test-app/tests/integration/components/constants.js
+++ b/test-app/tests/integration/components/constants.js
@@ -95,6 +95,34 @@ export const groupedNumbersWithDisabled = [
'one thousand',
];
+export const groupedNumbersWithCustomProperty = [
+ { groupName: 'Smalls', variant: 'Primary', options: ['one', 'two', 'three'] },
+ {
+ groupName: 'Mediums',
+ variant: 'Secondary',
+ options: ['four', 'five', 'six'],
+ },
+ {
+ groupName: 'Bigs',
+ variant: 'Primary',
+ options: [
+ {
+ groupName: 'Fairly big',
+ variant: 'Secondary',
+ options: ['seven', 'eight', 'nine'],
+ },
+ {
+ groupName: 'Really big',
+ variant: 'Primary',
+ options: ['ten', 'eleven', 'twelve'],
+ },
+ 'thirteen',
+ ],
+ },
+ 'one hundred',
+ 'one thousand',
+];
+
export const namesStartingWithA = [
'Abigail',
'Abril',
diff --git a/test-app/tests/integration/components/power-select/groups-test.js b/test-app/tests/integration/components/power-select/groups-test.js
index 5e47021c2..34a1ddb71 100644
--- a/test-app/tests/integration/components/power-select/groups-test.js
+++ b/test-app/tests/integration/components/power-select/groups-test.js
@@ -6,7 +6,7 @@ import {
typeInSearch,
clickTrigger,
} from 'ember-power-select/test-support/helpers';
-import { groupedNumbers } from '../constants';
+import { groupedNumbers, groupedNumbersWithCustomProperty } from '../constants';
module(
'Integration | Component | Ember Power Select (Groups)',
@@ -138,6 +138,70 @@ module(
);
});
+ test('When filtering, all properties of the options remain available for a single select', async function (assert) {
+ this.groupedNumbersWithCustomProperty = groupedNumbersWithCustomProperty;
+
+ await render(hbs`
+
+ {{option}}
+
+ `);
+
+ await clickTrigger();
+
+ const variants = Array.from(
+ document.querySelectorAll('[data-test-id="group-component-variant"]'),
+ ).map((e) => e.textContent.trim());
+
+ assert.deepEqual(variants, [
+ 'Primary',
+ 'Secondary',
+ 'Primary',
+ 'Secondary',
+ 'Primary',
+ ]);
+
+ await typeInSearch('one');
+
+ assert
+ .dom('[data-test-id="group-component-variant"]')
+ .exists({ count: 1 });
+
+ assert.dom('[data-test-id="group-component-variant"]').hasText('Primary');
+ });
+
+ test('When filtering, all properties of the options remain available for a multi select', async function (assert) {
+ this.groupedNumbersWithCustomProperty = groupedNumbersWithCustomProperty;
+
+ await render(hbs`
+
+ {{option}}
+
+ `);
+
+ await clickTrigger();
+
+ const variants = Array.from(
+ document.querySelectorAll('[data-test-id="group-component-variant"]'),
+ ).map((e) => e.textContent.trim());
+
+ assert.deepEqual(variants, [
+ 'Primary',
+ 'Secondary',
+ 'Primary',
+ 'Secondary',
+ 'Primary',
+ ]);
+
+ await typeInSearch('one');
+
+ assert
+ .dom('[data-test-id="group-component-variant"]')
+ .exists({ count: 1 });
+
+ assert.dom('[data-test-id="group-component-variant"]').hasText('Primary');
+ });
+
test('Click on an option of a group select selects the option and closes the dropdown', async function (assert) {
assert.expect(2);