Skip to content

bug: Select-Popover does not select the element when enter is pressed #30561

Description

@dolphinigle

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

            <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!

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions