bug: Crash removing/adding ion-input start/end slot #30380

Activity

1. ionitron-bot

   added

   triage

   on Apr 30, 2025
2. dev-charles15531 commented on May 3, 2025

   

   dev-charles15531

   on May 3, 2025

   More actions

   This is not a bug if you understand how ionic components work internally. You slotted the button with slot="end" and the dom was manipulated internally so that button can get placed at the end, hence react can't find that component.

   Try removing the slot="end" to see what i'm talking about.

   To solve this, consider moving the IonButton one level up the DOM tree, so it can be a direct child of the IonItem component.
3. ShaneK

   added

   needs: investigationThis issue is waiting on more investigation from the engineering team.This issue is waiting on more investigation from the engineering team.

   and removed

   triage

   on May 7, 2025
4. github-merge-queue

   added a commit that references this issue on Jun 2, 2025

   chore(git): improve Ionitron to stop closing issues that have the 'ne…

   ...

   c62590a
5. thetaPC commented on Oct 26, 2026

   

   thetaPC

   on Oct 26, 2026

   Contributor

   More actions

   Thanks for the report, and sorry for the delay.

   Verified on 9.0.9: typing into the input removes the Autofill button and clearing it brings the button back, with no crash. This was fixed by #30958 in v8.7.18, so upgrading to 8.7.18 or later fixes it with no changes to your component.

   The cause was the simulated slots in ion-input and ion-textarea. Ionic moves anything with slot="start" or slot="end" into an internal wrapper, so when React removed the button with removeChild on the ion-input, the browser threw because the button was no longer a direct child. Ionic's build has a patch that handles this, but before 8.7.18 it never reached the build that @ionic/react uses. #30958 is titled for ion-radio-group, but its fix was a build setting that turned that patch on for every component in that build, ion-input included.

   If you can't upgrade yet, keep the button rendered and hide it with an inline style instead of removing it, which works on 8.7.17:

   <IonButton slot="end" style={email ? { display: 'none' } : undefined}>
     Autofill
   </IonButton>

   The earlier comment suggesting this isn't a bug and moving the IonButton to be a direct child of IonItem avoids the crash, but the button then sits outside the input instead of in its end slot, so it doesn't render the same.

   Closing this as completed since it's fixed in 8.7.18.
6. thetaPC

   closed this as completedon Oct 26, 2026