Currently, I am integrating a nested checkbox feature from a working example into my application. The functionality of the checkboxes covers seven different scenarios:
- Scenario - No children, no parent selected
- Select the parent -> select both parent and all children
- Select a child -> select that child and its parent
- Scenario - All children and the parent selected
- Select the parent -> deselect the parent and all children
- Select a child -> deselect only that child
- Scenario - Some children and the parent selected
- Select the parent -> select all unselected children
- Select a child -> select that child while keeping parent selected
- Deselect last child -> deselect the child and parent
The challenge I'm facing is that when a child checkbox is selected or deselected, the state of the parent checkbox updates correctly but there's no visual change in the checkbox itself.
In my code snippet:
<Checkbox
disableRipple
edge="start"
checked={sub.checked}
onChange={() =>
this.handleCheckClick(sub.id, parentIndex)
}
/>
The Material-UI <Checkbox /> component is embedded within a list where each item has its own set of items with individual <Checkbox /> components. When I select the parent checkbox, the state changes as expected through the handleCheckClick() method, updating both state and visuals accordingly.
However, when clicking on a child checkbox, although the parent gets selected in the state, the visual update does not occur despite the checked state being linked to the state property.
An interesting observation is that using a native input like this:
<input
type="checkbox"
disableRipple
edge="start"
checked={sub.checked}
onChange={() =>
this.handleCheckClick(sub.id, parentIndex)
}
/>
Displays the correct behavior visually and also maintains the state consistency. It's unclear if this discrepancy is specific to Material-UI, a race condition, or another issue, but the logic within the handleCheckClick() function seems sound since state changes reflect accurately.