fix(select): add Enter keypress to dismiss

[haryopba]

Issue number: resolves #30561

---

What is the current behavior?

Pressing Enter does not dismiss modal or popover in select-modal or select-popover

What is the new behavior?

• Pressing Enter dismisses modal or popover in select-modal or select-popover

Does this introduce a breaking change?

• Yes
• No

Other information

N/A

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
ionic-framework	Ready	Preview	Comment	Aug 25, 2025 5:52am

[brandyscarney]

Thank you for the fix and tests! It looks like this doesn't work to select the value using Enter and there is also an issue where the modal immediately closes when you use Enter to open it after selecting something:

modal.mov

This also happens on the Popover example.

I think we need to add something like this to onKeyDown in radio-group to capture the value:

// Handle Enter key for select interfaces
if (['Enter'].includes(ev.key) && inSelectInterface) {
  const previousValue = this.value;
  this.value = current.value;
  if (previousValue !== this.value) {
    this.emitValueChange(ev);
  }
  ev.preventDefault();
}

But I'm not sure how to fix the other problem right now.

[haryopba]

@brandyscarney, sorry for the late response. The immediate close happens because the modal opens on keydown with Enter, instead of on keyup like it does with Space. It's a behaviour from ion-item and native button, to fix this I use onKeyDown attribute instead of onKeyUp in select-modal and select-popover.

[brandyscarney]

@haryopba Thank you for taking another look! I considered using onKeyDown as well, but if you hold the Enter key down you end up with this:

holding-enter.mov

I think we'll need to find another solution. 🤔