Disabling a TreeGrid leads to erratic behaviour

[mlindfors]

Description

If I have a TreeGrid for which I call setEnabled(false), the following things seem to happen

• the node toggles remain clickable, and seemingly change state when clicked i.e. the arrow icon changes direction
• however, despite the above, a collapsed node won't expand when clicked
• an expanded node WILL collapse when clicked, despite the component being disabled

Expected outcome

Disabling a TreeGrid should also disable the toggles.

Actual outcome

Disabling a TreeGrid causes the toggles to be only partially disabled, and the behaviour is erratic

Steps to reproduce

1. Add a TreeGrid component to a page
2. Expand one row programmatically
3. Set the TreeGrid disabled with treeGrid.setEnabled(false);
4. Click the row toggles to see the described behaviour

As a workaround, the following can be added into the shared styles, although I suspect it's still possible to toggle things with the keyboard even after this:

vaadin-grid[disabled] vaadin-grid-tree-toggle {
	pointer-events: none;
}

Environment

• Vaadin 14.7.7 and Vaadin 14.8.0.
• macOS Catalina (10.15.7),

Browsers Affected

• Chrome
• Firefox
• Safari
• Edge
• IE 11
• iOS Safari
• Android Chrome

[yuriy-fix]

Depends on vaadin/web-components#2170.

[TatuLund]

Workaround

Needed

frontend/styles/tree-grid-disabled.css

.disabled {
  pointer-events: none !important;
}


Import the styles in the view

@CssImport(value = "./styles/tree-grid-disabled.css", themeFor="vaadin-grid")

Add class name generator to TreeGrid hierachy column producing disabled when TreeGrid is disabled

treeGrid.addComponentHierarchyColumn(item -> ...).setClassNameGenerator(item -> !treeGrid.isEnabled() ? "disabled" : null);

Note, refreshAll() is needed to apply class name generator after status change

checkbox.addValueChangeListener(event -> {
   grid.setEnabled(!event.getValue());
   grid.getDataProvider().refreshAll();
});

[neelu-sarkar]

We've tried the above workaround and it disables mouse clicks but not keyboard navigation.

[web-padawan]

The disabled property added in the web component and that will make sorters unavailable.
This is considered a new feature so it will be only available from v23.0 onwards.