Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

VSCodeRadio cannot be checked in the first rendering #404

Open
kevin-s-wang opened this issue Sep 14, 2022 · 3 comments
Open

VSCodeRadio cannot be checked in the first rendering #404

kevin-s-wang opened this issue Sep 14, 2022 · 3 comments
Assignees
Labels
bug Something isn't working

Comments

@kevin-s-wang
Copy link

Describe the bug

React VSCodeRadio cannot be checked in the first rendering, but it's checked in the second rendering.

To reproduce

              <h2>{checkIt && 'True'}</h2>

              <div>
                <input name='test' type='radio' checked={checkIt}   />
                <label>True</label>
              </div>
              <div>
                <input name='test' type='radio' checked={!checkIt} />
                <label>False</label>
              </div>
              
              <VSCodeRadioGroup>
                <VSCodeRadio checked={ checkIt } >True</VSCodeRadio>
                <VSCodeRadio checked={ !checkIt }>False</VSCodeRadio>
              </VSCodeRadioGroup>

Expected behavior

The first radio should be checked:
image

Current behavior

None of the VSCodeRadios is checked in the first rendering:
image

However, the second rendering of the components is correct:
image

Also, I've tried to set checked={true}, it's the same behavior

Screenshots

Please see the above descriptions

Desktop (please complete the following information):

  • OS Version: [e.g. macOS 12.5.1]
  • Toolkit Version: [e.g. v1.0.1]

Additional context

@kevin-s-wang kevin-s-wang added the bug Something isn't working label Sep 14, 2022
@hawkticehurst
Copy link
Member

Thanks again for the bug report @kevin-s-wang!

Like the other issue, I just wanted to confirm that you're using the React toolkit components correct?

Regardless, I'll make sure to put this and your other bug report at the top of my list once I have some free cycles to work on this

@kevin-s-wang
Copy link
Author

@hawkticehurst yes, I'm using react toolkit.

@quark-zju
Copy link

Have you tried providing values?

              <VSCodeRadioGroup value='a'>
                <VSCodeRadio value='a'>True</VSCodeRadio>
                <VSCodeRadio value='b'>False</VSCodeRadio>
              </VSCodeRadioGroup>

facebook-github-bot pushed a commit to facebook/sapling that referenced this issue Aug 23, 2023
Summary:
The issue of microsoft/vscode-webview-ui-toolkit#404
seems to be the lack of `value` om the RadioGroup and Radios. Fix it by
providing `value`. This makes the radios work with keyboard.

Reviewed By: evangrayk

Differential Revision: D48520302

fbshipit-source-id: 9355cdcf837a3846f3d48de1d8d32c2abc46f3ae
facebook-github-bot pushed a commit to facebook/sapling that referenced this issue Feb 28, 2024
Summary:
This is perhaps the first in our custom components. We encountered some bugs when using some components from the vscode-webview-ui-toolkit library. We can work around this, but for our purposes, it'll be easier to just have some custom components that work for our uses.

This diff begins with a RadioGroup element, specifically due to an issue that happens with the vscode library Radio, where [it won't listen to onChange events correctly, often missing the first instance](microsoft/vscode-webview-ui-toolkit#404). It's possible to work around, but it's an easy footgun you have to test for.

This is a simple radio implementation. It changes the API slightly from the microsoft one. Since you always expect to have multiple radio options, instead of having you render <Radio>s yourself, you just render one <RadioGroup> with a list of labels. Basically equivalent, but slightly easier IMO, since you don't need to set the value and name and everything yourself on each one, just define it once.

We use very similar styles to the vscode webview ui toolkit, plus theme variables, so it doens't look out of place at all.

Our focus behavior is slightly different, since we focus each radio option instead  of the whole group. I actually thought that was weird behavior from the ui toolkit. Now we justused the normal DOM `<input type="radio">`  behavior.

Reviewed By: quark-zju

Differential Revision: D54317950

fbshipit-source-id: f4310d04545a807f43d7db4c0105bbc8947fe13f
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

3 participants