Skip to content
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

Jump to bottom

Fix/dropdown close on escape #1093

Merged
merged 4 commits into from
Feb 16, 2024
Merged

Fix/dropdown close on escape #1093

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
fb83a34
chore: bump ix version to 2.1.0-beta.2
nuke-ellington Feb 16, 2024
bd039e5
fix(core/dropdown): close all dropdowns on escape
nuke-ellington Feb 16, 2024
65872cb
style(core/dropdown): lint issue
nuke-ellington Feb 16, 2024
8437fc2
Merge branch 'main' into fix/dropdown-close-on-escape
nuke-ellington Feb 16, 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
2 changes: 1 addition & 1 deletion packages/core/src/components/dropdown/dropdown-controller.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -165,7 +165,7 @@ class DropdownController {

window.addEventListener('keydown', (event: KeyboardEvent) => {
if (event.key === 'Escape') {
this.dismissAll();
this.dismissAll([...this.dropdowns.keys()]);
}
});
}
Expand Down
131 changes: 110 additions & 21 deletions packages/core/src/components/dropdown/test/dropdown.ct.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -239,11 +239,18 @@ test.describe('Close behavior', () => {

test.describe('Nested dropdowns 1/3', () => {
function mountDropdown(
mount: (selector: string) => Promise<ElementHandle<HTMLElement>>
mount: (selector: string) => Promise<ElementHandle<HTMLElement>>,
config?: {
closeBehavior: string | boolean;
}
) {
return mount(html`
<ix-button id="trigger-dropdown-1">Trigger 1</ix-button>
<ix-dropdown id="dropdown-1" trigger="trigger-dropdown-1">
<ix-dropdown
close-behavior="${config?.closeBehavior ?? 'both'}"
id="dropdown-1"
trigger="trigger-dropdown-1"
>
<ix-dropdown-item id="trigger-dropdown-2">Item 1</ix-dropdown-item>
<ix-dropdown-item>Item 2</ix-dropdown-item>
<ix-dropdown-item id="trigger-dropdown-3">Item 3</ix-dropdown-item>
Expand Down Expand Up @@ -347,30 +354,112 @@ test.describe('Nested dropdowns 1/3', () => {
await expect(dropdown4).not.toBeVisible();
});

test('close by Escape', async ({ mount, page }) => {
await mountDropdown(mount);
test.describe('close by Escape with close behavior', () => {
test(' = both', async ({ mount, page }) => {
await mountDropdown(mount);

setupTest(page);
setupTest(page);

await triggerDropdown1.click();
await expect(dropdown1).toBeVisible();
await triggerDropdown1.click();
await expect(dropdown1).toBeVisible();

await triggerDropdown2.click();
await expect(dropdown2).toBeVisible();
await triggerDropdown2.click();
await expect(dropdown2).toBeVisible();

await triggerDropdown3.click();
await expect(dropdown2).not.toBeVisible();
await expect(dropdown3).toBeVisible();
await triggerDropdown3.click();
await expect(dropdown2).not.toBeVisible();
await expect(dropdown3).toBeVisible();

await triggerDropdown4.click();
await expect(dropdown4).toBeVisible();
await triggerDropdown4.click();
await expect(dropdown4).toBeVisible();

await page.keyboard.press('Escape');
await page.keyboard.press('Escape');

await expect(dropdown1).not.toBeVisible();
await expect(dropdown2).not.toBeVisible();
await expect(dropdown3).not.toBeVisible();
await expect(dropdown4).not.toBeVisible();
await expect(dropdown1).not.toBeVisible();
await expect(dropdown2).not.toBeVisible();
await expect(dropdown3).not.toBeVisible();
await expect(dropdown4).not.toBeVisible();
});

test(' = inside', async ({ mount, page }) => {
await mountDropdown(mount, {
closeBehavior: 'inside',
});

setupTest(page);

await triggerDropdown1.click();
await expect(dropdown1).toBeVisible();

await triggerDropdown2.click();
await expect(dropdown2).toBeVisible();

await triggerDropdown3.click();
await expect(dropdown2).not.toBeVisible();
await expect(dropdown3).toBeVisible();

await triggerDropdown4.click();
await expect(dropdown4).toBeVisible();

await page.keyboard.press('Escape');

await expect(dropdown1).not.toBeVisible();
await expect(dropdown2).not.toBeVisible();
await expect(dropdown3).not.toBeVisible();
await expect(dropdown4).not.toBeVisible();
});

test(' = outside', async ({ mount, page }) => {
await mountDropdown(mount, { closeBehavior: 'outside' });

setupTest(page);

await triggerDropdown1.click();
await expect(dropdown1).toBeVisible();

await triggerDropdown2.click();
await expect(dropdown2).toBeVisible();

await triggerDropdown3.click();
await expect(dropdown2).not.toBeVisible();
await expect(dropdown3).toBeVisible();

await triggerDropdown4.click();
await expect(dropdown4).toBeVisible();

await page.keyboard.press('Escape');

await expect(dropdown1).not.toBeVisible();
await expect(dropdown2).not.toBeVisible();
await expect(dropdown3).not.toBeVisible();
await expect(dropdown4).not.toBeVisible();
});

test(' = false', async ({ mount, page }) => {
await mountDropdown(mount, { closeBehavior: false });

setupTest(page);

await triggerDropdown1.click();
await expect(dropdown1).toBeVisible();

await triggerDropdown2.click();
await expect(dropdown2).toBeVisible();

await triggerDropdown3.click();
await expect(dropdown2).not.toBeVisible();
await expect(dropdown3).toBeVisible();

await triggerDropdown4.click();
await expect(dropdown4).toBeVisible();

await page.keyboard.press('Escape');

await expect(dropdown1).not.toBeVisible();
await expect(dropdown2).not.toBeVisible();
await expect(dropdown3).not.toBeVisible();
await expect(dropdown4).not.toBeVisible();
});
});
});

Expand Down Expand Up @@ -402,8 +491,8 @@ test.describe('nested dropdown 2/3', () => {
test.describe('nested dropdown 3/3', () => {
test.beforeEach(async ({ mount }) => {
await mount(`
<ix-button id="trigger-dropdown-1" close-behavior="outside">Trigger 1</ix-button>
<ix-dropdown id="dropdown-1" trigger="trigger-dropdown-1">
<ix-button id="trigger-dropdown-1">Trigger 1</ix-button>
<ix-dropdown id="dropdown-1" close-behavior="outside" trigger="trigger-dropdown-1">
<ix-dropdown-item id="trigger-dropdown-2">Item 1</ix-dropdown-item>
<ix-dropdown-item>Item 2</ix-dropdown-item>
</ix-dropdown>
Expand Down
Loading