Radio button invalid states are persisting

[mattclaffey-nhs]

When a conditional radio group has invalid fields in the children it will display a red border on the left of the radio group which is fine. However, when clicking a different radio option it keeps the red border until you go back to select the original radio option.

Ticket: https://nhsd-jira.digital.nhs.uk/browse/ERSSUP-89001
Video: https://nhs-my.sharepoint.com/:v:/g/personal/matthew_claffey1_nhs_net/EbkifyyYFFpIjLRqwH_NtA4BLVqcG_TLOFpDTRRJ4tzOOg?e=tMHFKj

[adam-the]

Hey. Not got anything productive to comment on your issue, but found it a bit uninclusive that you were sharing links to resources only accessible with an NHS account. I can get in to your SharePoint as I have an nhs.net account, but can't view your Jira. I tried with a regular Outlook account and couldn't get into either resource.

I thought half of the purpose of this being a public GitHub repository was to encourage external people to support it? 😊

[ozgurozbek]

Looking at the code, this conditional exists in the memory as a React node so the conditional fields stay alive, i.e. display the red border.

So this happens in the radio element, by not fully unmounting or disabling the conditional fields when their radio isn’t selected. Not in the group as stated in the issue. Unfortunately, as @adam-the stated I don't have any access to those links and I'm going by what I've used so far.

Nonetheless, flipping the conditional should fix it:

{shouldShowConditional || forceShowConditional
  ? conditional && (
    <div
      className="nhsuk-radios__conditional"
      id={`${inputID}--conditional`}
      {...conditionalWrapperProps}
    >
      {conditional}
    </div>
  )
  : null}

Passes the tests as well, although I haven't tested it properly by making a new storybook entry.

[colinrotherham]

To match NHS.UK frontend we're going to always render conditional content:

• Upgrade to NHS.UK frontend v10.0.0 and support SSR #267

But it'll stay hidden in the DOM until revealed

Can anyone help test?