Skip to content

(#1657) Updates combo box selected event details to be array #1896

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
olitharp-nci merged 1 commit into from
Jan 28, 2025
Merged

(#1657) Updates combo box selected event details to be array #1896

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions packages/ncids-js/src/components/usa-combo-box/__tests__/combo-box.events.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -499,13 +499,13 @@ describe('Combo box - Events', () => {
inputValue: 'a',
});

const previouslySelected1 = Object.assign({}, selected);
const previouslySelected1 = Object.assign({}, Array.from(selected));
await user.keyboard('[Enter]');
expect(selectedEvent).toHaveBeenCalledTimes(1);
expect(selectedEvent.mock.calls[0][0].detail).toEqual({
comboBox: comboBoxEl,
inputValue: 'Apple',
selected: selected,
selected: Array.from(selected),
previouslySelected: previouslySelected1,
});
expect(listboxCollapsedEvent).toHaveBeenCalledTimes(1);
Expand All @@ -514,7 +514,7 @@ describe('Combo box - Events', () => {
inputValue: 'Apple',
});

const previouslySelected2 = Object.assign({}, selected);
const previouslySelected2 = Object.assign({}, Array.from(selected));
await user.keyboard('[Escape]');
expect(unselectedEvent).toHaveBeenCalledTimes(1);
expect(unselectedEvent.mock.calls[0][0].detail).toEqual({
Expand All @@ -534,7 +534,7 @@ describe('Combo box - Events', () => {
expect(textClearedEvent.mock.calls[0][0].detail).toEqual({
comboBox: comboBoxEl,
previousInputValue: 'aa',
selected: selected,
selected: Array.from(selected),
});
});

Expand Down
8 changes: 4 additions & 4 deletions ...s/ncids-js/src/components/usa-combo-box/event-details/combo-box.selected.event-details.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,10 @@ import { ComboBoxEventDetails } from './combo-box.event-details';
* Custom event details for the `combo-box:selected` event.
*/
export type ComboBoxSelectedEventDetails = ComboBoxEventDetails & {
/** An [HTML collection of selected options](https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/selectedOptions) via the combo box select element. */
selected: HTMLCollectionOf<HTMLOptionElement>;
/** An [Array of selected options](https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/selectedOptions) via the combo box select element. */
selected: Array<HTMLOptionElement>;
/** The current value of the combo box input. */
inputValue: string;
/** An [HTML collection of selected options](https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/selectedOptions) before a change was made. */
previouslySelected: HTMLCollectionOf<HTMLOptionElement>;
/** An [Array of selected options](https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/selectedOptions) before a change was made. */
previouslySelected: Array<HTMLOptionElement>;
};
4 changes: 2 additions & 2 deletions ...ncids-js/src/components/usa-combo-box/event-details/combo-box.unselected.event-details.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,6 @@ import { ComboBoxEventDetails } from './combo-box.event-details';
* Custom event details for the `combo-box:unselected` event.
*/
export type ComboBoxUnselectedEventDetails = ComboBoxEventDetails & {
/** An [HTML collection of selected options](https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/selectedOptions) before a change was made. */
previouslySelected: HTMLCollectionOf<HTMLOptionElement>;
/** An [Array of selected options](https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/selectedOptions) before a change was made. */
previouslySelected: Array<HTMLOptionElement>;
};
4 changes: 2 additions & 2 deletions ...s/ncids-js/src/components/usa-combo-box/event-details/input.text-cleared.event-details.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,11 @@ import { ComboBoxEventDetails } from './combo-box.event-details';
export type ComboBoxTextClearedEventDetails = ComboBoxEventDetails & {
/**
* An
* [HTML collection of selected options](https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/selectedOptions)
* [Array of selected options](https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/selectedOptions)
* via the combo box select element. May be empty if no value was selected
* before the text was cleared.
*/
selected: HTMLCollectionOf<HTMLOptionElement>;
selected: Array<HTMLOptionElement>;
/** The previous value of the combo box input before the text was cleared. */
previousInputValue: string;
};
20 changes: 10 additions & 10 deletions packages/ncids-js/src/components/usa-combo-box/usa-combo-box.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -309,23 +309,23 @@ export class USAComboBox {
}

/**
* An HTMLCollection representing the set of <option> elements that are
* An Array representing the set of <option> elements that are
* selected.
*
* @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/selectedOptions
*/
public getSelectedOptions(): HTMLCollectionOf<HTMLOptionElement> {
return this.select.selectedOptions;
public getSelectedOptions(): Array<HTMLOptionElement> {
return Array.from(this.select.selectedOptions);
}

/**
* An HTMLOptionsCollection representing the set of <option> elements
* An Array representing the set of <option> elements
* contained by this element.
*
* @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/options
*/
public getOptions(): HTMLCollectionOf<HTMLOptionElement> {
return this.select.options;
public getOptions(): Array<HTMLOptionElement> {
return Array.from(this.select.options);
}

/**
Expand Down Expand Up @@ -1115,7 +1115,7 @@ export class USAComboBox {
bubbles: true,
detail: <ComboBoxTextClearedEventDetails>{
comboBox: this.comboBox,
selected: this.select.selectedOptions,
selected: this.getSelectedOptions(),
previousInputValue: previousInputValue,
},
})
Expand All @@ -1130,7 +1130,7 @@ export class USAComboBox {
*/
private setComboBox(listItem: HTMLLIElement): void {
// Clone of the previously selected options for the dispatched event.
const previouslySelected = Object.assign({}, this.select.selectedOptions);
const previouslySelected = Object.assign({}, this.getSelectedOptions());

this.selectedOption = listItem;
const value = listItem.dataset.value as string;
Expand All @@ -1154,7 +1154,7 @@ export class USAComboBox {
detail: <ComboBoxSelectedEventDetails>{
comboBox: this.comboBox,
previouslySelected: previouslySelected,
selected: this.select.selectedOptions,
selected: this.getSelectedOptions(),
inputValue: text,
},
})
Expand All @@ -1168,7 +1168,7 @@ export class USAComboBox {
*/
private unsetComboBox(): void {
// Clone of the previously selected options for the dispatched event.
const previouslySelected = Object.assign({}, this.select.selectedOptions);
const previouslySelected = Object.assign({}, this.getSelectedOptions());

this.resetComboBox();

Expand Down