fix(combobox): prevents navigation list with Space key (#7505)

**Related Issue:** #6387 ## Summary This prevents `Space` key navigating combobox list when opened.
Esri · Aug 11, 2023 · 58e2ff2 · 58e2ff2
1 parent e1aee99
commit 58e2ff2
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 3 deletions.
diff --git a/packages/calcite-components/src/components/combobox/combobox.e2e.ts b/packages/calcite-components/src/components/combobox/combobox.e2e.ts
@@ -897,7 +897,7 @@ describe("calcite-combobox", () => {
       expect(await page.evaluate(() => document.activeElement.id)).toBe("myCombobox");
     });
 
-    it(`Space opens dropdown and puts focus on first item`, async () => {
+    it(`Space opens dropdown and puts focus on first item and subsequent Space do not change the focus`, async () => {
       const inputEl = await page.find(`#myCombobox >>> input`);
       await inputEl.focus();
       await page.waitForChanges();
@@ -910,6 +910,12 @@ describe("calcite-combobox", () => {
 
       const visible = await firstFocusedGroupItem.isVisible();
       expect(visible).toBe(true);
+
+      await page.keyboard.press("Space");
+      await page.waitForChanges();
+      await page.keyboard.press("Space");
+      await page.waitForChanges();
+      expect(firstFocusedGroupItem).toBeTruthy();
     });
 
     it("when the combobox is focused & closed, Page up/down (fn arrow up/down) scrolls up and down the page", async () => {

diff --git a/packages/calcite-components/src/components/combobox/combobox.tsx b/packages/calcite-components/src/components/combobox/combobox.tsx
@@ -604,9 +604,11 @@ export class Combobox
         break;
       case " ":
         if (!this.textInput.value) {
+          if (!this.open) {
+            this.open = true;
+            this.shiftActiveItemIndex(1);
+          }
           event.preventDefault();
-          this.open = true;
-          this.shiftActiveItemIndex(1);
         }
         break;
       case "Home":