diff --git a/packages/nimble-components/src/select/index.ts b/packages/nimble-components/src/select/index.ts index 13407272b2..560f6be176 100644 --- a/packages/nimble-components/src/select/index.ts +++ b/packages/nimble-components/src/select/index.ts @@ -343,10 +343,16 @@ export class Select * @override */ public override handleChange(source: unknown, propertyName: string): void { - super.handleChange(source, propertyName); + // don't call super.handleChange so hidden options can be selected programmatically if (propertyName === 'value') { this.updateValue(); } + if (propertyName === 'selected') { + if (isListboxOption(source as Element)) { + this.selectedIndex = this.options.indexOf(source as ListboxOption); + } + this.setSelectedOptions(); + } } /** @@ -719,7 +725,7 @@ export class Select */ protected override setDefaultSelectedOption(): void { const options: ListboxOption[] = this.options - ?? Array.from(this.children).filter(o => isListboxOption(o as HTMLElement)); + ?? Array.from(this.children).filter(o => isListboxOption(o)); const optionIsSelected = (option: ListboxOption): boolean => { return option.hasAttribute('selected') || option.selected; diff --git a/packages/nimble-components/src/select/tests/select.spec.ts b/packages/nimble-components/src/select/tests/select.spec.ts index 09d0163902..1c819fa063 100644 --- a/packages/nimble-components/src/select/tests/select.spec.ts +++ b/packages/nimble-components/src/select/tests/select.spec.ts @@ -710,5 +710,18 @@ describe('Select', () => { expect(element.displayValue).toBe('Two'); }); + + it('placeholder can be changed to another option programmatically', async () => { + await waitForUpdatesAsync(); + element.options[0]!.hidden = false; + element.options[1]!.hidden = true; + element.options[1]!.disabled = true; + element.options[1]!.selected = true; + + expect(element.displayValue).toBe('Two'); + expect(element.value).toBe('two'); + await clickAndWaitForOpen(element); + expect(pageObject.isOptionVisible(1)).toBeFalse(); + }); }); });