Radio Button Group defaultChecked prop Not Working

[ehsaan-changa]

Hey,
I am using RadioButtonGroup component , In that i am running a loop on array of strings to show radio button.
While setting defaultChecked prop true is not working for me . While inspecting it, the checked prop is getting set but the styles are not getting applied. Rest of the selection flow works fine. Only the problem is with defaultChecked prop.
I have also updated the paste version to latest.

Can you help me out ??

[dosubot[bot]]

🤖

Hey there, @ehsaan-changa! 👋 Good to see you back. I remember working through some stuff with you before. Let me dive into this RadioButtonGroup issue and I'll circle back with what I find. Stay tuned! 🕵️‍♂️

[TwilioPasteBot]

Disclaimer: This is a very experimental bot using OpenAI's GPT-4. The answers may not be correct, a human will review the answer and update it if necessary.

---

Sorry, I don't know how to help with that.

I did do a search though, and I managed to find these other Discussions that might be similar or related to your question. Give them a read to see if they answer your question. If they do, head back here and update this discussion and mark it as answered, pointing others to the related discussion:

• Radio button group component bug (updated: 08/31/2023, similarity score: 82%)
• Radio Button Group - figma error (updated: 03/13/2023, similarity score: 82%)
• Unable to disable radio element under Radio group - Answer (updated: 06/30/2022, similarity score: 82%)

[dosubot[bot]]

🤖

Based on your description, it seems like you're encountering an issue with the defaultChecked prop in the RadioButtonGroup component. This could be due to the way the RadioButton component handles the checked and defaultChecked props.

In the RadioButton component, it first checks if both checked and defaultChecked props are provided. If they are, it throws an error because a radio button cannot be both controlled (using the checked prop) and uncontrolled (using the defaultChecked prop) at the same time.

The component then determines if it is controlled or uncontrolled. It is considered controlled if the checked prop is provided or if a value is provided from the RadioButtonContext. If the component is controlled, it ignores the defaultChecked prop and only uses the checked prop or the value from the RadioButtonContext.

If the component is uncontrolled, it uses the defaultChecked prop. However, this only happens if neither the checked prop nor a value from the RadioButtonContext is provided.

Here is the relevant code:

const isControlled = React.useMemo(() => checked !== undefined || radioGroupContext.value !== "", []);

// ...

if (isControlled) {
  // Use context's value first
  if (radioGroupContext.value !== "") {
    state.checked = radioGroupContext.value === value;
  } else {
    // Then checked prop on this radio
    state.checked = checked;
  }
} else {
  // Lastly fall back to default checked if state isn't controlled
  state.defaultChecked = defaultChecked;
}

You can find this code in the RadioButton.tsx file.

So, if you're providing a checked prop or a value from the RadioButtonContext, the defaultChecked prop will be ignored, which might be why it's not functioning as expected.

If you're still encountering issues, could you provide a code snippet of how you're using the RadioButtonGroup component? This will help me understand your issue better and provide a more accurate solution.

Sources

• packages/paste-core/components/radio-button-group/src/RadioButton.tsx

About Dosu

This response is meant to be useful and save you time. It is not meant to be a precise solution, but rather a starting point for your own research.

Help me be more useful! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

If you want to continue the conversation, start your reply with @dosu-bot.

[ehsaan-changa]

Here is the code snippet which i am using

const marketPercentileList = ["10th", "25th", "50th", "75th", "90th"];
  const [selectedMarketPercentile, setSelectedMarketPercentile] = useState("50th");
  <RadioButtonGroup
            attached
            name="Market Percentile"
            legend=""
            onChange={(value) => setSelectedMarketPercentile(value)}
          >
  {marketPercentileList.map((item, index) => (
              <RadioButton key={item} value={item} defaultChecked={item === selectedMarketPercentile}>
                {item}
              </RadioButton>
            ))}
</RadioButtonGroup>

[SiTaggart]

Hi there

If you could provide a simple reproduction of your issue in a codesandbox that would be helpful.

Initial thoughts though, are that Dosu is hinting you in the right direction, with controlled and uncontrolled input components in React.

Just like Radio group, or any radio button control when using React, you can't mix controlled and uncontrolled when using a component. Furthermore, you can't use defaultChecked on checkboxes or radios when the component is controlled by your state. Your state must control the checked state of the component.

From that code snippet, that's what you seem to be doing, controlling state but trying to render the radio's checked status as if it was an uncontrolled component.

[ehsaan-changa]

Hey @SiTaggart

Thanks for the Reply . Changing defaultChecked prop to checked in the above code snippet worked for me 👍

Thanks 🙌