Handle case where user clicks select after navigating to a different …

…option in dropdown.
ni · May 7, 2024 · af4af19 · af4af19
1 parent dd5391a
commit af4af19
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 1 deletion.
diff --git a/packages/nimble-components/src/select/index.ts b/packages/nimble-components/src/select/index.ts
@@ -327,20 +327,23 @@ export class Select
             return;
         }
 
+        let optionClicked = false;
         if (this.open) {
             const captured = (e.target as HTMLElement).closest<ListOption>(
                 'option,[role=option]'
             );
+            optionClicked = captured !== null;
 
             if (captured?.disabled) {
                 return;
             }
         }
 
+        const currentIndex = this.openActiveIndex ?? this.selectedIndex;
         super.clickHandler(e);
 
         this.open = this.collapsible && !this.open;
-        if (!this.open && this.selectedIndex !== -1) {
+        if (!this.open && this.selectedIndex !== currentIndex && optionClicked) {
             this.updateValue(true);
         }
     }

diff --git a/packages/nimble-components/src/select/tests/select.spec.ts b/packages/nimble-components/src/select/tests/select.spec.ts
@@ -442,6 +442,24 @@ describe('Select', () => {
         await disconnect();
     });
 
+    it('navigating to different option in dropdown and then clicking select (not dropdown) does not change value or emit change event', async () => {
+        const { element, connect, disconnect } = await setup();
+        await connect();
+        await waitForUpdatesAsync();
+        const changeEvent = jasmine.createSpy();
+        element.addEventListener('change', changeEvent);
+        const pageObject = new SelectPageObject(element);
+        await clickAndWaitForOpen(element);
+
+        pageObject.pressArrowDownKey();
+        pageObject.clickSelect();
+
+        expect(element.value).toBe('one');
+        expect(changeEvent.calls.count()).toBe(0);
+
+        await disconnect();
+    });
+
     describe('with 500 options', () => {
         async function setup500Options(): Promise<Fixture<Select>> {
             // prettier-ignore