Radio buttons inside divs are not firing onChange events.

[MustaphaGheribi]

Environment

• __Package version(s) "@blueprintjs/core": "^5.7.2",
• Operating system: Windows 10
• __Browser: Edge, Chrome 120.0.6099.111 (64 bits)

Question

I'm trying to setup a list of radio buttons but the onChange event doesn't seem to be firing when the radio buttons are inside divs.

Code sandbox

Steps to reproduce:

• Uncomment the surrounding divs in the code provided.

[adidahiya]

@MustaphaGheribi this is because RadioGroup inspects and injects props into its children which are Radio or RadioCard components:

https://github.com/palantir/blueprint/blob/d8a5e6ae95884ae9866bf717a926411543341597/packages/core/src/components/forms/radioGroup.tsx#L103-L117

I'm curious why do you need to wrap your Radio components in a div?

[MustaphaGheribi]

@adidahiya here's an example usecase

<div className="dialogContent">
  <div className="wrapper">
    <RadioGroup
      onChange={handleRadioGroupChange}
      selectedValue="optionOne"
    >
      <div className="radioContainerOne">
        <Radio
          label="Option 1"
          value="optionOne"
          name="groupOne"
          className="customRadioStyle"

        />
      </div>
      <div className="radioContainerTwo">
        <div className="rowStyle">
          <Radio
            label="Option 2"
            value="optionTwo"
            name="groupOne"
            className="customRadioStyle"
          />
        </div>
      </div>
    </RadioGroup>
  </div>
</div>

[adidahiya]

@MustaphaGheribi I see your HTML, but what are you functionally trying to achieve with the extra div elements here?

[MustaphaGheribi]

@adidahiya the divs are there for css styling.

[adidahiya]

@MustaphaGheribi what kind of styling specifically? Can you demo this in your code sandbox? Can you achieve the same styling by targeting the .bp5-radio element in your styling code?