calcite-design-system icon indicating copy to clipboard operation
calcite-design-system copied to clipboard

Bug: calciteTree selection in multi and multi-children modes

Open Elijbet opened this issue 2 years ago • 1 comments

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:

  1. Click on the caret to open Child 2.

  2. Click on Child 2 label.

Note that it selects all items.

  1. Click caret to open Grandchild 3.

  2. 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

  1. Click on the caret to open Child 2

  2. Click on label Child 2

Notice it selects all items and highlights.

  1. Click on label Child 2 again to see it deselect all and dim.

  2. Click on all nested grandchildren of child 2.

  3. 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

  1. Click on the caret to open Child 2.

  2. Click on Child 2 label.

Note that it didn't select all items or highlight parent.

  1. Click on the caret to open Grandchild 3.

  2. 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

Elijbet avatar Mar 02 '22 17:03 Elijbet

@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: Screen Shot 2022-03-25 at 4 10 12 PM

Additionally, "unselected" tree items are very light and appear almost disabled, maybe that's something to look at.

macandcheese avatar Mar 25 '22 23:03 macandcheese

This issue will be prioritized after the 1.0 release next month.

geospatialem avatar Dec 02 '22 17:12 geospatialem

I think this issue may no longer be valid after the recent updates to tree selection. @ashetland @SkyeSeitz Can you confirm?

jcfranco avatar Oct 14 '23 04:10 jcfranco

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?

ashetland avatar Oct 18 '23 20:10 ashetland