-
Notifications
You must be signed in to change notification settings - Fork 13.4k
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
base: main
Are you sure you want to change the base?
Conversation
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
There was a problem hiding this 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); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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; |
There was a problem hiding this comment.
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.
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. |
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?
connectedCallback()
to watch for changes in item's child list. When thechildList
changes, two pieces of state that track whether the item needs to be interactive and whether there are multiple interactive elements are updated.disconnectedCallback()
and logic to disconnect Mutation Observer.totalNestedInputs()
with logic from existingsetMultipleInputs
function to be used for bothsetMultipleInputs
and new functionsetIsInteractive
.Does this introduce a breaking change?
Other information
I opted for the MutationObserver over a
slotchange
listener because theslotchange
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 whatmultipleInputs
andisInteractive
are doing but requires more changes to existing code.