designsystemet icon indicating copy to clipboard operation
designsystemet copied to clipboard

Empty value for controlled Radio.Group should not throw React warning

Open mgunnerud opened this issue 9 months ago • 1 comments

Description of the bug

When using a controlled <Radio.Group> component, what should be the default value of value? Using the following example from storybook in code with a slight modification, initial value of value is set to empty string:

const [value, setValue] = useState<string>('');

<Radio.Group legend='Velg pizza (påkreved)' description='Alle pizzaene er laget på våre egne nybakte bunner og serveres med kokkens egen osteblanding og tomatsaus.' value={value} onChange={setValue}>
    <Radio value='ost'>Bare ost</Radio>
    <Radio value='Dobbeldekker' description='Chorizo spesial med kokkens luksuskylling'>Dobbeldekker</Radio>
    <Radio value='flammen'>Flammen</Radio>
    <Radio value='snadder'>Snadder</Radio>
</Radio.Group>

When running in dev mode, checking one of the checkboxes will print a React warning to the console: Warning: A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component.

However, the value is not undefined, it is empty string. What should be the default value of a controlled radio group? It is possible to set the value to something that will not evaluate to a false value that is neither of the radio values (e.g '-') but that does not feel correct. Should controlled <Radio.Group> accept empty string as default value without throwing the warning?

Steps To Reproduce

  1. Create a controlled <Radio.Group> component with the code above
  2. Run the code in dev mode
  3. Check one of the checkboxes, and notice the warning in console

Additional Information

No response

mgunnerud avatar May 06 '24 06:05 mgunnerud