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

[aeharding]

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

If the ion-input start/end slots are dynamically removed (for example, in response to user typing) then there is a crash

Expected Behavior

Does not crash

Steps to Reproduce

1. Visit https://stackblitz.com/edit/yrmxeg-uodqah?file=src%2Fmain.tsx
2. Type anything
3. Crash

Code Reproduction URL

https://stackblitz.com/edit/yrmxeg-uodqah

Ionic Info

Ionic:

Ionic CLI : 7.1.1 (/Users/aeharding/.nvm/versions/node/v20.8.1/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/react 7.6.3

Capacitor:

Capacitor CLI : 5.6.0
@capacitor/android : 5.6.0
@capacitor/core : 5.6.0
@capacitor/ios : 5.6.0

Utility:

cordova-res : not installed globally
native-run : not installed globally

System:

NodeJS : v20.8.1 (/Users/aeharding/.nvm/versions/node/v20.8.1/bin/node)
npm : 10.1.0
OS : macOS Unknown

Additional Information

The bot closed #28855

Thank you for the issue, and apologies for the delay. I can replicate this, but I need to dig into why exactly it's happening. It's possible this is related to the simulated slots feature that we use for components like ion-input and ion-textarea, since the bug doesn't replicate with non-simulated slots like the ones on ion-button.

[dev-charles15531]

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.