Skip to content

Commit 58e2ff2

Browse files
authored
fix(combobox): prevents navigation list with Space key (#7505)
**Related Issue:** #6387 ## Summary This prevents `Space` key navigating combobox list when opened.
1 parent e1aee99 commit 58e2ff2

File tree

2 files changed

+11
-3
lines changed

2 files changed

+11
-3
lines changed

packages/calcite-components/src/components/combobox/combobox.e2e.ts

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -897,7 +897,7 @@ describe("calcite-combobox", () => {
897897
expect(await page.evaluate(() => document.activeElement.id)).toBe("myCombobox");
898898
});
899899

900-
it(`Space opens dropdown and puts focus on first item`, async () => {
900+
it(`Space opens dropdown and puts focus on first item and subsequent Space do not change the focus`, async () => {
901901
const inputEl = await page.find(`#myCombobox >>> input`);
902902
await inputEl.focus();
903903
await page.waitForChanges();
@@ -910,6 +910,12 @@ describe("calcite-combobox", () => {
910910

911911
const visible = await firstFocusedGroupItem.isVisible();
912912
expect(visible).toBe(true);
913+
914+
await page.keyboard.press("Space");
915+
await page.waitForChanges();
916+
await page.keyboard.press("Space");
917+
await page.waitForChanges();
918+
expect(firstFocusedGroupItem).toBeTruthy();
913919
});
914920

915921
it("when the combobox is focused & closed, Page up/down (fn arrow up/down) scrolls up and down the page", async () => {

packages/calcite-components/src/components/combobox/combobox.tsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -604,9 +604,11 @@ export class Combobox
604604
break;
605605
case " ":
606606
if (!this.textInput.value) {
607+
if (!this.open) {
608+
this.open = true;
609+
this.shiftActiveItemIndex(1);
610+
}
607611
event.preventDefault();
608-
this.open = true;
609-
this.shiftActiveItemIndex(1);
610612
}
611613
break;
612614
case "Home":

0 commit comments

Comments
 (0)