When a Switch is selected it's checkbox is not checked

[armandabric]

Provide a general summary of the issue here

The hidden checkbox that power the Switch seems to not be in with the Switch isSelected state.

🤔 Expected Behavior?

When the Switch is selected, the hidden checkbox should have the attribute checked="".
When the Switch is not selected, the hidden checkbox should not have the attribute checked="".

😯 Current Behavior

If neither defaultSelected or isSelected are used the checked="" attribute is never added to the hidden checkbox.

If defaultSelected=true the hidden checkbox have the checked="" attribute at first render. But when the Switch is toggle, the checked="" attribute is still present.

💁 Possible Solution

No response

🔦 Context

No response

🖥️ Steps to Reproduce

https://codesandbox.io/p/sandbox/pedantic-snowflake-6sm9h5?workspaceId=ws_3TnnD19dp7Tmr52NkWtSat

You can also try any switch of the documentation page

Version

RAC 1.5.0
React 18 & 19

What browsers are you seeing the problem on?

Other

If other, please specify.

All browsers

What operating system are you using?

Ubuntu

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[LFDanLu]

Seems like the value is updating under the hood but just not updating in the DOM:

Maybe related to facebook/react#3005. Is this behavior causing any specific issues?

[armandabric]

@LFDanLu It's preventing the parent form to work as intended. I have to manually add hidden input in my custom Toggle to make it works.

[LFDanLu]

What specifically isn't working with the parent form? Seems to log out the proper state of the switch here: https://codesandbox.io/p/sandbox/rac-switch-not-checked-forked-fj8wtt?file=%2Fsrc%2FApp.js%3A16%2C30

[armandabric]

I was thinking that prevent us to test our component expect(switch).toBeChecked() but it seems we have an issue is our test. After fixing it, doing expect(switch).toBeChecked() started to works.

It's still an issue to debug that the checked attribute is not visible in the devtools or screen.debug() but it works.

Sorry for that

[LFDanLu]

This feels like a React/dev tools issue, will need to look if there is an easy fix we can apply here but otherwise seems innocuous then.