fix(select): add Enter keypress to dismiss

Author: haryopba

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

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);
 

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';

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

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();
+      });
     });
   });
 });

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';