Skip to content

bug: IonAlert hijacks 'insertLineBreak' when using inputs #30811

@mikebrucker

Description

@mikebrucker

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions