material-components-web
material-components-web copied to clipboard
[DataTable] Disabled row checkbox can be toggled with the select all header checkbox
Bug report
I am confused whether that's a bug or should be a feature but the ability of the user to check/uncheck checkboxes disabled by a developer prevailed in favor of a bug. The issue is simple a code disabling a checkbox can be side overstepped by user toggling the select all header checkbox.
const dataTable = new MDCDataTable(document.querySelector('.mdc-data-table'));
const checkbox = dataTable.rowCheckboxList[1];
checkbox.disabled = true;
you can find a demo of the issue here
Steps to reproduce
- Use the standard demo of the datatable or the provided demo above
- Disable a checkbox
- Start toggling all checkboxes with the header one
Actual behavior
A disabled checkbox status can be overridden
Expected behavior
Datatable to comply with disabled checkboxes. I do understand that such an issue goes far more deep of what the mass selection checkbox should do or not and the behavior depends on the point of view what is considered ok or not in that case. But from the little perspective of the developer using the library there's a few issues that must be stressed:
- One has to check whether the user have toggled disabled boxes
- find those across many
- check them back which from UI perspective isn't very pretty when checkboxes toggle themselves back of a sudden
- update model if some events have triggered any logic which in some case might be devastating and cause great issues...
Screenshots
Your Environment:
Software | Version(s) |
---|---|
MDC Web | 7.0.0 |
Chromium | 81.0.4200.0 |
Ubuntu | 18.04 |
Additional context
Possible solution
Probably it's a good idea for the full selection concept to be changed. What comes to mind is that:
- Full selection should not toggle disabled row checkboxes
- However that raises another issue the full selection then stops to be full so these cases might be handled with:
- a flag property
fullToggle: true
which keeps the current behavior - when
fullToggle: false
in that mode data table complies with disabled checkboxes and doesn't make full selection.- also doesn't invoke
SELECTED_ALL
,UNSELECTED_ALL
events butSELECTED_ALL_AVAILABLE
andUNSELECTED_ALL_AVAILABLE
- also doesn't invoke
- a flag property
Thank you for your time reading my suggestion I hope it's reasonable.
Hi there, thanks for pointing this out. Currently we do not support disabled checkbox, however this is something we'll need to bring to the design team's attention to get some UX Guidance on the desired pattern: If disabled should the row's checkbox still be toggled from the "select all" header checkbox or should disabled checkboxes be skipped when checking/unchecking the rest of the checkboxes.
That is pretty critical and creates big problems please make an effort to solve it
Necroposting as I ran into the same issue.
Any updates on this?