Allow changing placeholder option.

ni · Feb 26, 2024 · 3ba52a6 · 3ba52a6
1 parent b858136
commit 3ba52a6
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 2 deletions.
diff --git 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
@@ -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();
+        });
     });
 });