Repository navigation
bug: IonAlert hijacks 'insertLineBreak' when using inputs #30811
Description
Prerequisites
- I have read the Contributing Guidelines.
- I agree to follow the Code of Conduct.
- I have searched for existing issues that already report this problem, without success.
Ionic Framework Version
v8.x
Current Behavior
- IonAlert has an option to add
inputs. - When adding checkbox inputs to the ion-alert, on any page in any location, any textarea or other input in which you want to input a linebreak is impossible.
- The ion-alert inputs seem to be hijacking the 'beforeinput' event or the e.inputType === 'insertLineBreak'.
- Having isOpen true or false has no effect.
Expected Behavior
Linebreaks are possible when an IonAlert with custom inputs are present.
Steps to Reproduce
check the code reproduction
- open or close ion-alert (does not matter)
- open console and observe the log for the linebreak event
- type text into the text area and hit enter key for a linebreak
- toggle inputs for ion-alert from 5 checkboxes to an empty array
- type text into the text area and hit enter key for a linebreak
Code Reproduction URL
https://react-9q8cq9kr.stackblitz.io
Ionic Info
From my normal project (not the code reproduction repo)
Ionic:
Ionic CLI : 7.2.1 (C:\Users\mysecretusername\AppData\Roaming\nvm\v22.19.0\node_modules@ionic\cli)
Ionic Framework : @ionic/react 8.7.6
Capacitor:
Capacitor CLI : 7.4.3
@capacitor/android : 7.4.3
@capacitor/core : 7.4.3
@capacitor/ios : 7.4.3
Utility:
cordova-res : not installed globally
native-run : 2.0.1
System:
NodeJS : v22.19.0 (C:\Program Files\nodejs\node.exe)
npm : 10.9.3
OS : Windows 10
Additional Information
No response
Activity
phillewis1 commentedon Dec 4, 2025
I believe this issue is causing the
onIonChangeevent handlers on inputs to break throughout my entire application as well. Once the IonAlert component is mounted, pressing "Enter" does not fire the onIonChange event anywhere in the application. Best not to use checkbox inputs on IonAlert components until this is resolved.mikebrucker commentedon Dec 5, 2025
I'm at the moment just completely wrapping the
IonAlertwith{isOpen ? <IonAlert isOpen={isOpen} inputs={inputs} /> : null}until this is addressed.thetaPC commentedon Oct 19, 2026
Thanks for the report, and sorry for the delay.
Verified on 9.0.8. When an
ion-alerthas checkboxinputs, it listens for the Enter key on the whole document and cancels it, so that Enter does not toggle its own checkboxes. That listener is active for as long as the alert is mounted, open or closed, and it is not limited to the alert's checkboxes. So while an inlineIonAlertwith checkboxes is on the page, Enter does not insert line breaks in any textarea, does not submit forms, does not fireionChangeon inputs (as noted in the earlier comment), and does not activate buttons, including the alert's own OK button.Workarounds:
IonAlertwhile it is open, as in the earlier comment, so the listener goes away when it closes:useIonAlertinstead of the inline component. The alert is removed from the page when it is dismissed:Tracked as a bug in
core.b84330808 commentedon Oct 21, 2026
Thanks for confirming! I'd like to take this one if the team isn't already on it. I have a fix that only cancels Enter when the keydown comes from one of the alert's own checkboxes, so Enter works again elsewhere on the page and on the alert's buttons, with spec tests for all three cases. Happy to open a PR once you give the go-ahead.
fix(alert): only block Enter on checkbox inputs, not the whole docume…
ShaneK commentedon Oct 28, 2026
Thanks for your report! This has been fixed in v9.0.10!