Checked render prop does not work with external state props

[Ekeu]

Hello

I don't know if this is a bug or me not working it out the right way. Since yesterday I'm having some issues with RadioGroup from Headless UI. Here is a video (with no sound) showing the problem I'm facing and in the following paragraph I'm going to explain.

headless-issue_1.mp4

As you can see from the video I was trying to implement the quick view of my different products and everything went on fine. I faced an issue when I had to deal with selecting sizes. Rendering and styling the different sizes was ok but when it came to rendering a different style based on the checked prop, things weren't working as expected.

From the video, I have three components: QuickView ( which keeps the states selectedSize and setSelectedSize which I provide to RadioGroup), QuickViewProductCard and ProductSizes.

Here is how they are structured

<QuickView>
   <QuickViewProductCard>
      <ProductSizes>
         // Inside here we ave the RadioGroup component
      </ProductSizes>
   </QuickViewProductCard>
</QuickView>

While passing down the states: selectedSize and setSelectedSize, you can see that I'm rendering the value of selectedSize. I did this to ensure that the value was changing when I was clicking on a radio button. It was changing, as you can see, but the styling provided if a radio button was selected or checked wasn't applied ( background color).

Confused about why this was happening I tried to see if the same thing would happen if I declared my states in the component where the RadioGroup component is .i.e ProductSizes component.

Surprisingly, everything was working as expected. The value of selectedSize still changed as it did in the first case, but now when a radio button was selected or checked, the provided styles were applied.

So I want to know is it a bug, or we can't provide an external state to a RadioGroup component, or am I just doing something wrong?

[RobinMalfait]

Hey! Thank you for your bug report!
Much appreciated! 🙏

I'm pretty sure that the issue is that your selectedSize is an object and that the identity changes somewhere in the code. I wrote more about that here in a similar issue: #585 (comment)
If this doesn't help, then please create a minimal reproduction repo and share it, which makes it easier to pin point the issue.

[Ekeu]

Hey @RobinMalfait here is the minimal reproduction I did on CodeSandbox

[Ekeu]

Hey @RobinMalfait

I think I figured out what was wrong. I'm a Junior Dev 😄 , so not sure about what I'm going to say. I'm going to wait that you agree with me before I mark it as an answer.

So the answer you gave me and the link to the comment kept me thinking so I once again went through the three components and I noticed I had the below lines of code in my QuickViewProductCard component:

I think the problem was here because since the selectedSize prop passes through this component (QuickViewProductCard) before going through the ProductSizes component and then entering the RadioGroup, it then means that each time I change the value of selectedSize by clicking on the radio button, the QuickViewProductCard updates, thereby updating his child component ProductSizes

These updates then make the identity between selectedSizes and the value of actualSizes ( which is passed to the ProductSizes component) not to be equal.

Reasoning this way I then changed those lines of code to this:

And everything worked as expected

[RobinMalfait]

Yeah, so the issue is that you are creating new objects every render:

// qv-product-card.component.js:17
const possibleSizes = ["XS", "S", "M", "L", "XL", "2XL"];
const actualSizes = possibleSizes
  .filter((size) => new Set(productSizes).has(size))
  .map((size) => ({ name: size, inStock: true })); // This object is new every single render

One way to fix it is by using the name of that object:

// product-sizes.component.js:36
<RadioGroup.Option
  key={size.name}
  value={size.name}
  // ...
/>

This will make sure that the selectedSize is a primitive value like S, MD, ...
If you want to lookup the object, then you can find it based on the name.

https://codesandbox.io/s/radio-group-issue-forked-n7b9v?file=/src/components/qv-product-card.component.js

[RobinMalfait]

(Hah, didn't notice you replied already, glad you figured it out!)

[Ekeu]

Thank you very much!