diff --git a/core/src/components/select-modal/select-modal.tsx b/core/src/components/select-modal/select-modal.tsx index 5925d209640..77e872e86a9 100644 --- a/core/src/components/select-modal/select-modal.tsx +++ b/core/src/components/select-modal/select-modal.tsx @@ -95,7 +95,7 @@ export class SelectModal implements ComponentInterface { labelPlacement="end" onClick={() => this.closeModal()} onKeyUp={(ev) => { - if (ev.key === ' ') { + if (ev.key === 'Enter' || ev.key === ' ') { /** * Selecting a radio option with keyboard navigation, * either through the Enter or Space keys, should diff --git a/core/src/components/select-modal/test/basic/select-modal.e2e.ts b/core/src/components/select-modal/test/basic/select-modal.e2e.ts index 126082712c3..8ea21183d88 100644 --- a/core/src/components/select-modal/test/basic/select-modal.e2e.ts +++ b/core/src/components/select-modal/test/basic/select-modal.e2e.ts @@ -64,6 +64,24 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => { await expect(selectModalPage.modal).not.toBeVisible(); }); + test('pressing Enter on an unselected option should dismiss the modal', async () => { + await selectModalPage.setup(config, options, false); + + await selectModalPage.pressEnterOnOption('apple'); + await selectModalPage.ionModalDidDismiss.next(); + await expect(selectModalPage.modal).not.toBeVisible(); + }); + + test('pressing Enter on a selected option should dismiss the modal', async ({ browserName }) => { + test.skip(browserName === 'firefox', 'Same behavior as ROU-5437'); + + await selectModalPage.setup(config, checkedOptions, false); + + await selectModalPage.pressEnterOnOption('apple'); + await selectModalPage.ionModalDidDismiss.next(); + await expect(selectModalPage.modal).not.toBeVisible(); + }); + test('clicking the close button should dismiss the modal', async () => { await selectModalPage.setup(config, options, false); diff --git a/core/src/components/select-modal/test/fixtures.ts b/core/src/components/select-modal/test/fixtures.ts index 2058848aa84..e1df642c78b 100644 --- a/core/src/components/select-modal/test/fixtures.ts +++ b/core/src/components/select-modal/test/fixtures.ts @@ -63,6 +63,11 @@ export class SelectModalPage { await option.press('Space'); } + async pressEnterOnOption(value: string) { + const option = this.getOption(value); + await option.press('Enter'); + } + private getOption(value: string) { const { multiple, selectModal } = this; const selector = multiple ? 'ion-checkbox' : 'ion-radio'; diff --git a/core/src/components/select-popover/select-popover.tsx b/core/src/components/select-popover/select-popover.tsx index 00a8ccf6f2e..cb2e7a1a24d 100644 --- a/core/src/components/select-popover/select-popover.tsx +++ b/core/src/components/select-popover/select-popover.tsx @@ -160,7 +160,7 @@ export class SelectPopover implements ComponentInterface { disabled={option.disabled} onClick={() => this.dismissParentPopover()} onKeyUp={(ev) => { - if (ev.key === ' ') { + if (ev.key === 'Enter' || ev.key === ' ') { /** * Selecting a radio option with keyboard navigation, * either through the Enter or Space keys, should diff --git a/core/src/components/select-popover/test/basic/select-popover.e2e.ts b/core/src/components/select-popover/test/basic/select-popover.e2e.ts index 14cc0c0c146..b333d5a8fca 100644 --- a/core/src/components/select-popover/test/basic/select-popover.e2e.ts +++ b/core/src/components/select-popover/test/basic/select-popover.e2e.ts @@ -63,6 +63,24 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => { await selectPopoverPage.ionPopoverDidDismiss.next(); await expect(selectPopoverPage.popover).not.toBeVisible(); }); + + test('pressing Enter on an unselected option should dismiss the popover', async () => { + await selectPopoverPage.setup(config, options, false); + + await selectPopoverPage.pressEnterOnOption('apple'); + await selectPopoverPage.ionPopoverDidDismiss.next(); + await expect(selectPopoverPage.popover).not.toBeVisible(); + }); + + test('pressing Enter on a selected option should dismiss the popover', async ({ browserName }) => { + test.skip(browserName === 'firefox', 'Same behavior as ROU-5437'); + + await selectPopoverPage.setup(config, checkedOptions, false); + + await selectPopoverPage.pressEnterOnOption('apple'); + await selectPopoverPage.ionPopoverDidDismiss.next(); + await expect(selectPopoverPage.popover).not.toBeVisible(); + }); }); }); }); diff --git a/core/src/components/select-popover/test/fixtures.ts b/core/src/components/select-popover/test/fixtures.ts index 14c81033763..5444a889c04 100644 --- a/core/src/components/select-popover/test/fixtures.ts +++ b/core/src/components/select-popover/test/fixtures.ts @@ -63,6 +63,11 @@ export class SelectPopoverPage { await option.press('Space'); } + async pressEnterOnOption(value: string) { + const option = this.getOption(value); + await option.press('Enter'); + } + private getOption(value: string) { const { multiple, selectPopover } = this; const selector = multiple ? 'ion-checkbox' : 'ion-radio';