Skip to content

fix(dropdown): open dropdown on ArrowDown & ArrowUp keys #10264

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
anveshmekala merged 10 commits into from
Sep 25, 2024
+162 −30
Merged

fix(dropdown): open dropdown on ArrowDown & ArrowUp keys #10264

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
d3370e1
fix(dropdown): open dropdown on ArrowDown & ArrowUp keys
anveshmekala Sep 10, 2024
8940e89
refactor
anveshmekala Sep 10, 2024
95a46f1
cleanup
anveshmekala Sep 10, 2024
520fa62
feedback changes & refactor
anveshmekala Sep 11, 2024
6150a6d
arrowkeys wont close dropdown
anveshmekala Sep 11, 2024
a45b1dc
Merge branch 'dev' into anveshmekala/8205-fix-dropdown-arrow-keys
anveshmekala Sep 11, 2024
a5c193c
revert & add eventListeners
anveshmekala Sep 24, 2024
de0c3eb
avoid closing dropdown on arrow keys
anveshmekala Sep 25, 2024
6b08f1d
add delay for open story
anveshmekala Sep 25, 2024
59836d4
revert delay for open story
anveshmekala Sep 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
128 changes: 128 additions & 0 deletions packages/calcite-components/src/components/dropdown/dropdown.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1308,5 +1308,133 @@ describe("calcite-dropdown", () => {

expect(await isElementFocused(page, "#item-3")).toBe(true);
});

it("should open the dropdown and focus the first item with ArrowDown", async () => {
const page = await newE2EPage();
await page.setContent(html`
<calcite-dropdown>
<calcite-button slot="trigger">Open</calcite-button>
<calcite-dropdown-group selection-mode="single">
<calcite-dropdown-item id="item-1">1</calcite-dropdown-item>
<calcite-dropdown-item id="item-2">2</calcite-dropdown-item>
<calcite-dropdown-item id="item-3">3</calcite-dropdown-item>
</calcite-dropdown-group>
</calcite-dropdown>
`);
await skipAnimations(page);

const dropdown = await page.find("calcite-dropdown");
await dropdown.callMethod("setFocus");
await page.waitForChanges();

await page.keyboard.press("ArrowDown");
await page.waitForChanges();
expect(await dropdown.getProperty("open")).toBe(true);
expect(await isElementFocused(page, "#item-1")).toBe(true);

await page.keyboard.press("ArrowDown");
await page.waitForChanges();
expect(await isElementFocused(page, "#item-2")).toBe(true);

await page.keyboard.press("ArrowUp");
await page.waitForChanges();
expect(await isElementFocused(page, "#item-1")).toBe(true);
});

it("should open the dropdown and focus the last item with ArrowUp", async () => {
const page = await newE2EPage();
await page.setContent(html`
<calcite-dropdown>
<calcite-button slot="trigger">Open</calcite-button>
<calcite-dropdown-group selection-mode="single">
<calcite-dropdown-item id="item-1">1</calcite-dropdown-item>
<calcite-dropdown-item id="item-2">2</calcite-dropdown-item>
<calcite-dropdown-item id="item-3">3</calcite-dropdown-item>
</calcite-dropdown-group>
</calcite-dropdown>
`);
await skipAnimations(page);

const dropdown = await page.find("calcite-dropdown");
await dropdown.callMethod("setFocus");
await page.waitForChanges();

await page.keyboard.press("ArrowUp");
await page.waitForChanges();
expect(await dropdown.getProperty("open")).toBe(true);
expect(await isElementFocused(page, "#item-3")).toBe(true);

await page.keyboard.press("ArrowDown");
await page.waitForChanges();
expect(await isElementFocused(page, "#item-1")).toBe(true);

await page.keyboard.press("ArrowUp");
await page.waitForChanges();
expect(await isElementFocused(page, "#item-3")).toBe(true);
});

it("should open the dropdown and focus the selected item with ArrowDown", async () => {
const page = await newE2EPage();
await page.setContent(html`
<calcite-dropdown>
<calcite-button slot="trigger">Open</calcite-button>
<calcite-dropdown-group selection-mode="single">
<calcite-dropdown-item id="item-1">1</calcite-dropdown-item>
<calcite-dropdown-item id="item-2" selected>2</calcite-dropdown-item>
<calcite-dropdown-item id="item-3">3</calcite-dropdown-item>
</calcite-dropdown-group>
</calcite-dropdown>
`);
await skipAnimations(page);

const dropdown = await page.find("calcite-dropdown");
await dropdown.callMethod("setFocus");
await page.waitForChanges();

await page.keyboard.press("ArrowDown");
await page.waitForChanges();
expect(await dropdown.getProperty("open")).toBe(true);
expect(await isElementFocused(page, "#item-2")).toBe(true);

await page.keyboard.press("ArrowDown");
await page.waitForChanges();
expect(await isElementFocused(page, "#item-3")).toBe(true);

await page.keyboard.press("ArrowUp");
await page.waitForChanges();
expect(await isElementFocused(page, "#item-2")).toBe(true);
});

it("should open the dropdown and focus the selected item with ArrowUp", async () => {
const page = await newE2EPage();
await page.setContent(html`
<calcite-dropdown>
<calcite-button slot="trigger">Open</calcite-button>
<calcite-dropdown-group selection-mode="single">
<calcite-dropdown-item id="item-1">1</calcite-dropdown-item>
<calcite-dropdown-item id="item-2" selected>2</calcite-dropdown-item>
<calcite-dropdown-item id="item-3">3</calcite-dropdown-item>
</calcite-dropdown-group>
</calcite-dropdown>
`);
await skipAnimations(page);

const dropdown = await page.find("calcite-dropdown");
await dropdown.callMethod("setFocus");
await page.waitForChanges();

await page.keyboard.press("ArrowUp");
await page.waitForChanges();
expect(await dropdown.getProperty("open")).toBe(true);
expect(await isElementFocused(page, "#item-2")).toBe(true);

await page.keyboard.press("ArrowUp");
await page.waitForChanges();
expect(await isElementFocused(page, "#item-1")).toBe(true);

await page.keyboard.press("ArrowDown");
await page.waitForChanges();
expect(await isElementFocused(page, "#item-2")).toBe(true);
});
});
});
64 changes: 34 additions & 30 deletions packages/calcite-components/src/components/dropdown/dropdown.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -238,7 +238,7 @@ export class Dropdown
<div
class="calcite-trigger-container"
id={`${guid}-menubutton`}
onClick={this.openCalciteDropdown}
onClick={this.toggleDropdown}
onKeyDown={this.keyDownHandler}
ref={this.setReferenceEl}
>
Expand Down Expand Up @@ -354,7 +354,7 @@ export class Dropdown
return;
}

this.openCalciteDropdown();
this.toggleDropdown();
}

@Listen("pointerleave")
Expand Down Expand Up @@ -445,6 +445,8 @@ export class Dropdown

guid = `calcite-dropdown-${guid()}`;

private focusLastDropdownItem = false;

//--------------------------------------------------------------------------
//
// Private Methods
Expand Down Expand Up @@ -573,24 +575,25 @@ export class Dropdown
return;
}

if (this.open) {
if (key === "Escape") {
this.closeCalciteDropdown();
event.preventDefault();
return;
} else if (event.shiftKey && key === "Tab") {
this.closeCalciteDropdown();
event.preventDefault();
return;
}
if (key === "Escape") {
this.closeCalciteDropdown();
event.preventDefault();
return;
}

if (isActivationKey(key)) {
this.openCalciteDropdown();
event.preventDefault();
} else if (key === "Escape") {
if (this.open && event.shiftKey && key === "Tab") {
this.closeCalciteDropdown();
event.preventDefault();
return;
}

if (isActivationKey(key)) {
this.toggleDropdown();
event.preventDefault();
} else if (key === "ArrowDown" || key === "ArrowUp") {
this.focusLastDropdownItem = key === "ArrowUp";
this.open = true;
Copy link
Copy Markdown
Member

@jcfranco jcfranco Sep 24, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should cancel the event here too since it's handled.

this.el.addEventListener("calciteDropdownOpen", this.onOpenEnd);
}
};

Expand Down Expand Up @@ -634,29 +637,30 @@ export class Dropdown
}
}

private focusOnFirstActiveOrFirstItem = (): void => {
this.getFocusableElement(
this.getTraversableItems().find((item) => item.selected) || this.items[0],
);
};
private focusOnFirstActiveOrDefaultItem = (): void => {
const selectedItem = this.getTraversableItems().find((item) => item.selected);
const target: HTMLCalciteDropdownItemElement =
selectedItem ||
(this.focusLastDropdownItem ? this.items[this.items.length - 1] : this.items[0]);

this.focusLastDropdownItem = false;

private getFocusableElement(item: HTMLCalciteDropdownItemElement): void {
if (!item) {
if (!target) {
return;
}

focusElement(item);
}
focusElement(target);
};

private toggleOpenEnd = (): void => {
this.focusOnFirstActiveOrFirstItem();
this.el.removeEventListener("calciteDropdownOpen", this.toggleOpenEnd);
private onOpenEnd = (): void => {
this.focusOnFirstActiveOrDefaultItem();
this.el.removeEventListener("calciteDropdownOpen", this.onOpenEnd);
};

private openCalciteDropdown = () => {
private toggleDropdown = () => {
this.open = !this.open;
if (this.open) {
this.el.addEventListener("calciteDropdownOpen", this.toggleOpenEnd);
this.el.addEventListener("calciteDropdownOpen", this.onOpenEnd);
}
};

Expand Down