CheckBox: Visible checked state of the Checkbox changes even checked property is set to specific value

[sadie100]

Describe the bug

Even if I fix the checked property of the CheckBox to false(or true), the visible checked state of the CheckBox changes every time when the user clicks on it. This is unexpected, because the basic html checkbox input(input type='checkbox') acts as frozen if the checked property is fixed with certain value. (I added this case on the StackBlitz example for compare)

If this is by design and not a bug, please consider fixing the feature. We can't control the value now. I need to connect some data logic to the CheckBox's onChange property, and I want the 'checked' property to be controlled by our state. (So that we can cancel the check action if the data logic fails). But now the property is always changing regardless of 'checked', so there's no way to control the displayed checked property.

I've also checked the Switch component which has 'checked' property too, and it behaves the same way. I'd appreciate it if you could look at that as well.

Isolated Example

https://stackblitz.com/edit/github-kacj2o-fej5h6?file=src%2FApp.tsx

Reproduction steps

1. Set the CheckBox checked property to certain value(true or false)
2. Click the CheckBox

Expected Behaviour

If checked value is not changed, UI should not be changed.

Screenshots or Videos

No response

UI5 Web Components for React Version

1.29.0

UI5 Web Components Version

1.24.0

Browser

Chrome

Operating System

No response

Additional Context

No response

Relevant log output

No response

Organization

No response

Declaration

• [X] I’m not disclosing any internal or sensitive information.

[Lukas742]

HI @sadie100

to fully control the component's checked state you can call event.preventDefault in the change handler of the components:

      <CheckBox
        checked={false}
        onChange={(event) => {
          event.preventDefault();
        }}
      />

https://stackblitz.com/edit/github-kacj2o-6w3pho?file=src%2FApp.tsx

Does this solve your issue?

[sadie100]

Ooh it works! Thanks for help ☺️

I hope there's some explanation in CheckBox's document that the event.preventDefault() handling is required to control the component. There may be a lot of users who think they can control the component without adding the code, because that's how the type='checkbox' input in the default html behaves. Also, other UI component libraries like MUI or ChakraUI also support controlling a CheckBox without that code snippet.

[Lukas742]

Currently this information is not available everywhere, but the ui5-webcomponents already added it to their documentation. Since we're generating our docs from the docs of ui5-webcomponents, we'll need to update our script so it includes this information. Currently we're pretty busy with preparing our next major release, but I'll add it to our roadmap. Thank you for your feedback! :)

that's how the type='checkbox' input in the default html behaves

Btw, that's only applicable for React. ;) When using standard HTML without any framework, boolean handling works in the same way as for ui5-webcomponents: https://stackblitz.com/edit/github-ls4btp

This is something we don't catch with our wrapper because it would require too much modification of the web component (and its default behavior), and we wanted to keep it as basic as possible to keep maintenance efforts at a minimum and especially to avoid problems with updates. With React19, web component support will improve and perhaps the behavior will become more consistent then.

We'll keep this issue open until we outline if the default behavior of an event is preventable.

[ui5-webcomponents-react-bot]

:tada: This issue has been resolved in version v2.0.0-rc.2 :tada:

The release is available on v2.0.0-rc.2

Your semantic-release bot :package::rocket: