material-components-web-react
material-components-web-react copied to clipboard
Checkbox List: Disable checkbox while saving
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.
Have you tried setting disabled on the ListItem?
@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?
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.