ionic-framework icon indicating copy to clipboard operation
ionic-framework copied to clipboard

bug: IonAlert hijacks 'insertLineBreak' when using `inputs`

Open mikebrucker opened this issue 2 weeks ago • 2 comments

Prerequisites

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

  1. open or close ion-alert (does not matter)
  2. open console and observe the log for the linebreak event
  3. type text into the text area and hit enter key for a linebreak
  4. toggle inputs for ion-alert from 5 checkboxes to an empty array
  5. 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

mikebrucker avatar Nov 26 '25 10:11 mikebrucker