Fix radios component with defaultChecked inputs and conditional content

[colinrotherham]

This PR fixes #374

In v6.0.0 we accidentally left internal useState() in the following components (from v5.x)

1. Radios selectedRadio and setSelectedRadio()
2. Radios item selectedRadio and setSelected()

These should have been removed for the v6 release where:

• All form components support ref for DOM element access
• All form components support defaultValue, value and onChange handlers

This makes sure radio buttons work with either checked (controlled) and defaultChecked (uncontrolled)

What was the fix?

• Removing internal state updates prevents unnecessary re-renders
• Falling back to name (not just id) before generating IDs prevents unnnecessary re-renders

What was the bug?

Radio inputs previously decided whether to show conditional content using:

const shouldShowConditional = selectedRadio === radioReference && checked !== false;

Notice that defaultChecked is not included? Only controlled inputs worked

To workaround this, the previous version tried to sync up the internal context/state with:

useEffect(() => {
  if (defaultChecked) setSelected(radioReference);
}, [defaultChecked, setSelected, radioReference]);

useEffect(() => {
  if (checked) setSelected(radioReference);
}, [checked, setSelected, radioReference]);

But that caused problems with modern React and NHS.UK frontend conditional content synchronisation

• The 1st render with defaultChecked showed the conditional content
• The 2nd render after the useEffect() hide the conditional content (unless already checked)
• The 3rd render after re-clicking the input finally shows the conditional content

[mikemonteith]

I've tested this locally in my service (https://github.com/NHSDigital/record-a-vaccination-service) and it's working perfectly.

[mikemonteith]

57 changed files and 17 commits in this PR. I assume some of these commits are not indended for this PR?

[colinrotherham]

57 changed files and 17 commits in this PR. I assume some of these commits are not indended for this PR?

Well spotted thanks, I've changed the PR base to #375

[mikemonteith]

LGTM

[frankieroberto]

@colinrotherham thank you! This unblocks an issue found by @andyrae6 in https://github.com/NHSDigital/record-a-vaccination-service/pull/55

[colinrotherham]

When tesing with Next.js another re-rendering issue came up. From the changelog:

Note: Form components with missing id (or idPrefix) now fall back to the name prop before generating IDs. This helps prevent hydration mismatch errors with server-side rendering (SSR) HTML.

[sonarqubecloud]

Quality Gate failed

Failed conditions
26.8% Duplication on New Code (required ≤ 3%)

See analysis details on SonarQube Cloud

[colinrotherham]

Thanks @mikemonteith and @frankieroberto

The Sonar duplications are largely from the Storybook examples so we should ignore them in future