dolphinigle · GitHub

Prerequisites

Ionic Framework Version

v8.x

Current Behavior

Image

Pressing enter when selecting an item does nothing. Only space button works.

Expected Behavior

It should select it, like when pressing the Space button.

Steps to Reproduce

  1. Create and open ion-select with interface='popover'
  2. Navigate to it with keyboard
  3. Select an option and press enter

Code Reproduction URL

Ionic Info

"@ionic/angular": "8.5.6",

Additional Information

This is the exact cause in the code:

From

if (ev.key === ' ') {
            <ion-radio
              value={option.value}
              disabled={option.disabled}
              onClick={() => this.dismissParentPopover()}
              onKeyUp={(ev) => {
                if (ev.key === ' ') {
                  /**
                   * Selecting a radio option with keyboard navigation,
                   * either through the Enter or Space keys, should
                   * dismiss the popover.
                   */
                  this.dismissParentPopover();
                }
              }}
            >

The comment said it should work with Enter key, but the code only checks for space key. This is created from PR 7578aa3 . It has been unchanged since then.

The fix is simply add enter checking there:

if (ev.key === ' ' || ev.key === 'Enter') {

Let me know if the Ionic team is online with this suggestion and I'm happy to create the PR to contribute.

Thank you!

Read the original on github.com ↗