material-components-web icon indicating copy to clipboard operation
material-components-web copied to clipboard

[DataTable] Disabled row checkbox can be toggled with the select all header checkbox

Open webbby opened this issue 4 years ago • 3 comments

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

  1. Use the standard demo of the datatable or the provided demo above
  2. Disable a checkbox
  3. 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:

  1. Full selection should not toggle disabled row checkboxes
  2. 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 but SELECTED_ALL_AVAILABLE and UNSELECTED_ALL_AVAILABLE

Thank you for your time reading my suggestion I hope it's reasonable.

webbby avatar Jul 13 '20 18:07 webbby

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.

EstebanG23 avatar Jul 17 '20 20:07 EstebanG23

That is pretty critical and creates big problems please make an effort to solve it

webbby avatar Jul 18 '20 21:07 webbby

Necroposting as I ran into the same issue.

Any updates on this?

Pupix avatar Nov 09 '21 14:11 Pupix