Unable to disable radio element under Radio group

[josamit]

Hi,

I am unable to disable the radio element under Radio group.

What works

const SslRadioGroup = () => {
  const [value, setValue] = React.useState('enabled');
  return (
    <RadioGroup
      name="ssl"
      value={value}
      legend="SSL Certificate Validation"
      helpText="Determines if certificate validation is performed on all Twilio originated requests."
      onChange={newValue => {
        setValue(newValue);
      }}
      required
    >
      <>
      <Radio
        id="enabled"
        value="enabled"
        name="ssl"
        disabled
      >
        Enabled
      </Radio>
      </>
      <Radio
        id="disabled"
        value="disabled"
        name="ssl"
      >
        Disabled
      </Radio>
    </RadioGroup>
  );
};

render(
  <SslRadioGroup />
)

This code snippet works and the radio element gets disabled if it is wrapped in <> </> tags, but that renders the radio element unusable since the Radio group now doesn't recognise those.

What Doesn't work

const SslRadioGroup = () => {
  const [value, setValue] = React.useState('enabled');
  return (
    <RadioGroup
      name="ssl"
      value={value}
      legend="SSL Certificate Validation"
      helpText="Determines if certificate validation is performed on all Twilio originated requests."
      onChange={newValue => {
        setValue(newValue);
      }}
      required
    >
      <Radio
        id="enabled"
        value="enabled"
        name="ssl"
        disabled
      >
        Enabled
      </Radio>
      <Radio
        id="disabled"
        value="disabled"
        name="ssl"
      >
        Disabled
      </Radio>
    </RadioGroup>
  );
};

render(
  <SslRadioGroup />
)

This is expected to work, but for some reason, the radio element doesn't get disabled. Can someone please help me with figuring out what's wrong here?

[richbachman]

Hi @josamit. Currently the RadioGroup passed down certain props to the Radios within the group. So the disabled you have on the one radio is being overwritten by the group. We accounted for a use-case where the whole RadioGroup was disabled, and not individual radios within the group being disabled. Could you explain the use-case a little more so we can figure out a best path forward? Please share any screenshots of if available as well.

[josamit]

Our use case requires one of the radio elements within a group to be disabled based on evaluation of certain conditions.
Please find the attached screenshot for reference

[richbachman]

Thanks for sending over the screenshot and information. Looks like we shouldn't be overwriting certain props at the group level. I'm going to create add a ticket to our backlog so we can get that fixed.

[josamit]

Thank you very much, I will move our implementation to use console components in the meanwhile.

[TheSisb]

Hi @josamit

I just merged a PR #599 that fixes your issue. Please let me know if you still have any concerns with the component.

Thanks for calling that out!