calcite-design-system
calcite-design-system copied to clipboard
Bug: calciteTree selection in multi and multi-children modes
Actual Behavior
In selection mode multi-children, clicking on parent selects/deselects all as well as highlights for the occasion, but it won’t highlight if all items are selected, also won’t dim if all are deselected.
In selection mode muli, clicking on parents emits an array of selected nested items, but it neither selects all nor deselects all, nor it highlights when all items are selected.
Expected Behavior
In selection mode multi-children, the parent label should highlight when all items are selected and dim when all are deselected for consistent selection behavior across all Tree modes.
In selection mode multi, clicking on parent should select/deselect all, as well as highlight/dim accordingly for consistent selection behavior across all Tree modes.
See ancestor selection mode for a working comparison. In this mode clicking on label highlights the checkbox, in the above 2 modes it should highlight the label. https://codepen.io/elijbet/pen/mdqarLK
Steps:
-
Click on the caret to open Child 2.
-
Click on Child 2 label.
Note that it selects all items.
-
Click caret to open Grandchild 3.
-
Deselect all Great-Grandchildren.
Note the parent grandchild 3 was deselected.
Reproduction Sample
See below.
Reproduction Steps
multi-children demo: https://codepen.io/elijbet/pen/mdqQzEY
-
Click on the caret to open Child 2
-
Click on label Child 2
Notice it selects all items and highlights.
-
Click on label Child 2 again to see it deselect all and dim.
-
Click on all nested grandchildren of child 2.
-
Click on grandchild 3 to have all nested items selected.
Notice that the top parent wasn't highlighted even though all nested items are selected.
multi demo: https://codepen.io/elijbet/pen/RwjEGZQ?editors=1011
-
Click on the caret to open Child 2.
-
Click on Child 2 label.
Note that it didn't select all items or highlight parent.
-
Click on the caret to open Grandchild 3.
-
Click label to select Grandchild 3.
Note that it didn't select all items or highlight parent.
Reproduction Version
v1.0.0-beta.78
Relevant Info
No response
Regression?
No response
@asangma do you want to help me work through some of the UI oddities here?
I think the combination of blue text, checks, etc., is incredibly confusing and should be improved with more consistent indication of selection:
Additionally, "unselected" tree items are very light and appear almost disabled, maybe that's something to look at.
This issue will be prioritized after the 1.0 release next month.
I think this issue may no longer be valid after the recent updates to tree selection. @ashetland @SkyeSeitz Can you confirm?
No longer applies to selection-mode:"multiple"
, but the expected behavior noted above might still be valid for multichildren. Which then begs the question, at that point what is the difference between multichildren and ancestors? Is it just a visual affordance? Are both of these modes used/needed or could we consolidate into one?