fix(item): allow nested content to be conditionally interactive

[soundproofboot]

Issue number: resolves #29763

---

What is the current behavior?

If the nested content of an ion-item is conditionally rendered and goes from containing zero interactive elements to one or more, a render is not triggered in Angular and the item does not behave correctly for one or more nested inputs.

What is the new behavior?

• A mutation observer is created in connectedCallback() to watch for changes in item's child list. When the childList changes, two pieces of state that track whether the item needs to be interactive and whether there are multiple interactive elements are updated.
• Add disconnectedCallback() and logic to disconnect Mutation Observer.
• Create new function totalNestedInputs() with logic from existing setMultipleInputs function to be used for both setMultipleInputs and new function setIsInteractive.

Does this introduce a breaking change?

• Yes
• No

Other information

I opted for the MutationObserver over a slotchange listener because the slotchange fires synchronously on any slot within the shadowRoot, and the MutationObserver fires once on the item element itself. I attempted to add the minimum amount of logic to achieve this but there may be a more elegant solution that combines what multipleInputs and isInteractive are doing but requires more changes to existing code.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
ionic-framework	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 30, 2025 4:48pm