components icon indicating copy to clipboard operation
components copied to clipboard

bug(mat-tree): Example bug on https://stackblitz.com/angular/gabkadkvybq

Open Kidrik opened this issue 3 years ago • 0 comments

Is this a regression?

  • [ ] Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

Hello guys, I just found your very good example to use mat-tree on https://stackblitz.com/angular/gabkadkvybq.

But happens that I tested it and it will not work as expected if after select a node and all of its children we deselect a child and then try to select again the parent node. The error is that the parent node will appear as selected but none of the children are selected.

Reproduction

Steps to reproduce:

  1. Select a parent node (All of the children nodes appear selected. This is correct and expected).
  2. Deselect a child node. (Parent node appear with partially selected children. This is correct and expected).
  3. Try to select again parent node. (Parent node will appear as selected but none children is selected. This is the error)

mat-tree-example-unexpected-behavior

Expected Behavior

After select again a parent with partially selected children should appear as selected and all of its children should be selected.

I propose a solution for this issue on todoItemSelectionToggle method.

it should do a validation before toggle a node. If the node is not selected or if it's selected and all of its children are selectd shoudl allow the toggle. Otherwise should not. An example of this method code with the validation:

` todoItemSelectionToggle(node: TodoItemFlatNode): void { if(!this.checklistSelection.isSelected(node) || (this.checklistSelection.isSelected(node) && this.descendantsAllSelected(node))){ this.checklistSelection.toggle(node); }

const descendants = this.treeControl.getDescendants(node);
this.checklistSelection.isSelected(node)
  ? this.checklistSelection.select(...descendants)
  : this.checklistSelection.deselect(...descendants);

} `

Actual Behavior

After select again a parent with partially selected children, parent appear as selected but none of its children appear as selected.

Environment

  • mat-tree example on https://stackblitz.com/angular/gabkadkvybq

Kidrik avatar Oct 12 '22 17:10 Kidrik