DataListCheck: decide on one of checked/isChecked and make sure the checked property is propagated on the DOM

[KKoukiou]

Describe the issue. What is the expected and unexpected behavior?

If providing only the isChecked property to the component we get errors in console:

Warning: A component is changing an uncontrolled input to be controlled.

Passing only the 'checked' property seems to work properly, apart from the DOM not being updated, aka the check attribute never appears on the in the DOM.

Is this a bug or enhancement? If this issue is a bug, is this issue blocking you or is there a work-around?
bug

What is your product and what release version are you targeting?
Anaconda WebUI

[mcarrano]

@tlabaj can you take a look at this? Is there are good reason to have redundant props here?

[boaz0]

@KKoukiou @mcarrano

When you want the checkbox to be uncontrolled (you're not using React state to determine the state of the checkbox) then checked is the right prop.
However, once you're passing onChange the checkbox is controlled and the state value needs to be passed in isChecked.

An example of controlled DataListCheck

const [isChecked, setIsChecked] = React.useState(false)

<DataListCheck isChecked={isChecked} onChange={value => setIsChecked(value)} ... />

An uncontrolled DataListCheck example

const defaultValue = true
<DataListCheck checked={defaultValue} />

I hope that was clear enough.

[KKoukiou]

Sorry I forgot to answer here.

I am using it the expected way with the Controlled variant and I still get the warnings:

My code looks like:

                     <DataListCheck                                                                 
                             name={"check-action-" + disk.target}                                   
                             onChange={checked => {                                                 
                                 onChange(index, checked);                                          
                             }}                                                                     
                             isChecked={!!disk.checked} /> 

isChecked is obviouly assigned to a boolean, since it's casted.

However I still see the warnings in console:

Warning: A component is changing a controlled input to be uncontrolled. This is likely caused by the value changing from a defined to undefined, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component

[boaz0]

I couldn't reproduce this, What version of patternfly-react you're using?

[KKoukiou]

"@patternfly/react-core": "4.198.5"