Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

soundproofboot
Copy link
Contributor

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.

@soundproofboot soundproofboot requested a review from a team as a code owner June 30, 2025 16:46
Copy link

vercel bot commented Jun 30, 2025

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

Copy link
Member

@ShaneK ShaneK left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Overall this looks alright and I requested some minor changes for clarity. However, I am worried about this approach because now we're creating an observable for every item in a list, which is probably fine for small lists but may impact performance in larger lists - especially those with content that changes.

I think you should try to see if you can do the same thing with existing Stencil lifecycle hooks, such as componentDidRender, which should, from my understanding, already hook into the changes you're looking for. Possibly even componentDidUpdate - but be warned that only fires after the first render. If you went this path you'd need to do a check after first render, too. I'd encourage exploring those paths before continuing down this one.

// If item contains any interactive children, set isInteractive to `true`
const { covers, inputs, clickables } = this.totalNestedInputs();

this.isInteractive = !!(covers.length + inputs.length + clickables.length);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
this.isInteractive = !!(covers.length + inputs.length + clickables.length);
this.isInteractive = covers.length || inputs.length || clickables.length;

This change request is very minor, but it's more obvious what you're doing at a glance and it allows short circuiting from the engine as soon as any of the checks pass. I don't know if the compiler is smart enough to see what you're doing here and break it out the same way when you're adding lengths like that, but even if it is I still think the readability would be improved. You can even omit the explicit boolean casting (!!) since that happens from the || operator.

@@ -32,11 +32,13 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac
private labelColorStyles = {};
private itemStyles = new Map<string, CssClassMap>();
private inheritedAriaAttributes: Attributes = {};
private observer?: MutationObserver;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we should rename this so it's more obvious what its function is from just looking at it. In these components, a lot tends to happen, so clarity in variable naming - especially at this scope - is important. Probably something more like interactivityObserver or contentObserver if we think someday we'll do something else when the child content changes.

@soundproofboot
Copy link
Contributor Author

Overall this looks alright and I requested some minor changes for clarity. However, I am worried about this approach because now we're creating an observable for every item in a list, which is probably fine for small lists but may impact performance in larger lists - especially those with content that changes.

I think you should try to see if you can do the same thing with existing Stencil lifecycle hooks, such as componentDidRender, which should, from my understanding, already hook into the changes you're looking for. Possibly even componentDidUpdate - but be warned that only fires after the first render. If you went this path you'd need to do a check after first render, too. I'd encourage exploring those paths before continuing down this one.

Awesome, thank you for the feedback. I'll look back at the lifecycle hooks again and see if I can come up with a more performant solution.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
package: core @ionic/core package
Projects
None yet
Development

Successfully merging this pull request may close these issues.

bug: conditional appearance of the content of an ion-item prevent click on right and left edge of the ion-item (with checkbox)
2 participants