A checkbox using the defaultChecked and conditional props causes the conditional content to flicker and not display properly.
We have this code:
<Radios
name="haveNhsNumber"
error={getFieldError(errors, "haveNhsNumber")}
>
<Radios.Radio
value="yes"
defaultChecked={vaccination?.haveNhsNumber}
conditional={
<TextInput
name="nhsNumber"
id="nhsNumber"
defaultValue={vaccination?.patient?.nhsNumber ?? undefined}
error={getFieldError(errors, "nhsNumber")}
label="NHS number"
hint="For example, 485 777 3456"
width={10}
/>
}
>
Yes
</Radios.Radio>
<Radios.Radio
value="no"
defaultChecked={!vaccination?.haveNhsNumber}
>
No
</Radios.Radio>
</Radios>
The conditional content only shows after the Yes or No button has been clicked twice, and there's a flicker.
A checkbox using the
defaultCheckedandconditionalprops causes the conditional content to flicker and not display properly.We have this code:
The conditional content only shows after the Yes or No button has been clicked twice, and there's a flicker.