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

Checkbox List: Disable checkbox while saving

Open hvolschenk opened this issue 4 years ago • 3 comments

Hiya,

A bit of a question, really.

Context

I am building a Checkbox List. Each time a List Item is selected I fire off a call to the API to save said selection.

While the API Call is in-flight I would like to disable the List Item so it can finish before being able to deselect it again.

Problem

The problem I am facing is that it doesn't seem like @material-react-list (or @material/list for that matter) supports disabling a List Item in any manner.

What I've tried

Disabled Checkbox

The first thing I tried was adding a disabled prop to a <Checkbox /> while saving. The issue with this is that if the <Checkbox /> is disabled, selecting a List Item gives me the following error:

Uncaught TypeError: Cannot read property 'checked' of null
    at Object.isCheckboxCheckedAtIndex (index.js:1)
    at t.toggleCheckboxAtIndex_ (index.js:61)
    at t.setSelectedIndexOnAction_ (index.js:61)
    at t.handleClick (index.js:61)
    at Object.handleClick (index.js:1)
    at index.js:61
    at HTMLUnknownElement.callCallback (react-dom.development.js:150)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:200)
    at invokeGuardedCallback (react-dom.development.js:257)
    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:271)

Remove checkboxList

The <List> has the checkboxList property enabled. I tried disabling the checkboxList prop on <ListItem />s which are busy saving but that did nothing.

I also tried to remove the checkboxList prop from the <List> and then only setting it to true/false per <ListItem /> but in that case they are still selectable.

Remove Checkbox

I also tried to remove the checkboxList prop from the <List> and then only setting it to true/false per <ListItem /> as well as remove the <Checkbox /> from each "disabled" <ListItem /> but even in this case the I get the error mentioned above in Disabled Checkbox.

hvolschenk avatar Aug 04 '19 09:08 hvolschenk

Have you tried setting disabled on the ListItem?

liamcmitchell-sc avatar Aug 13 '19 07:08 liamcmitchell-sc

@liamcmitchell-sc Thanks! What a champion.

I didn't try that. It's not documented and it also isn't in the list of props so I completely missed that.

I think I should keep this issue open and add it to the documentation. What are your thoughts?

hvolschenk avatar Aug 13 '19 20:08 hvolschenk

Apparently it comes from RippledComponentProps. It looks like it should be documented so open a PR if you want. I'm not a maintainer though so that's just my 2 cents.

liamcmitchell-sc avatar Aug 14 '19 09:08 liamcmitchell-sc