v1.1.4-test.3

Author: Tomdango

package.json

@@ -1,6 +1,6 @@
 {
   "name": "nhsuk-react-components",
-  "version": "1.1.4-test.2",
+  "version": "1.1.4-test.3",
   "author": {
     "email": "[email protected]",
     "name": "Thomas Judd-Cooper",

src/components/checkboxes/CheckboxContext.ts

@@ -2,7 +2,7 @@ import { createContext } from 'react';
 
 export interface ICheckboxContext {
   name: string;
-  getBoxId: () => string | undefined;
+  getBoxId: (reference: string) => string | undefined;
   setConditional: (boxReference: string, hasConditional: boolean) => void;
   leaseReference: () => string;
   unleaseReference: (reference: string) => void;

src/components/checkboxes/Checkboxes.tsx

@@ -19,6 +19,8 @@ class Checkboxes extends PureComponent<CheckboxesProps, CheckboxesState> {
 
   private boxReferences: Array<string> = [];
 
+  private boxIds: Record<string, string> = {};
+
   constructor(props: {}, ...rest: any[]) {
     super(props, ...rest);
     this.state = {
@@ -58,10 +60,19 @@ class Checkboxes extends PureComponent<CheckboxesProps, CheckboxesState> {
     });
   };
 
-  getBoxId = (id: string): string => {
+  getBoxId = (id: string, reference: string): string => {
     const { idPrefix } = this.props;
+    if (reference in this.boxIds) {
+      return this.boxIds[reference];
+    }
     this.boxCount += 1;
-    return `${idPrefix || id}-${this.boxCount}`;
+    this.boxIds[reference] = `${idPrefix || id}-${this.boxCount}`;
+    return this.boxIds[reference];
+  };
+
+  resetBoxIds = () => {
+    this.boxCount = 0;
+    this.boxIds = {};
   };
 
   static Box = Box;
@@ -71,11 +82,11 @@ class Checkboxes extends PureComponent<CheckboxesProps, CheckboxesState> {
     return (
       <FormGroup<CheckboxesProps> inputType="checkboxes" {...rest}>
         {({ className, name, id, idPrefix, ...restRenderProps }) => {
-          this.boxCount = 0;
+          this.resetBoxIds();
           const containsConditional = this.state.conditionalBoxes.length > 0;
           const contextValue: ICheckboxContext = {
             name,
-            getBoxId: () => this.getBoxId(id),
+            getBoxId: reference => this.getBoxId(id, reference),
             setConditional: this.setConditional,
             leaseReference: this.leaseReference,
             unleaseReference: this.unleaseReference,

src/components/checkboxes/components/Box.tsx

@@ -31,16 +31,15 @@ const Box: React.FC<BoxProps> = ({
   ...rest
 }) => {
   const { getBoxId, name, setConditional, unleaseReference, leaseReference } = useContext<
-    ICheckboxContext
+  ICheckboxContext
   >(CheckboxContext);
   const [boxReference] = useState<string>(leaseReference());
   const [showConditional, setShowConditional] = useState<boolean>(!!(checked || defaultChecked));
-  const inputID = id || getBoxId();
+  const inputID = id || getBoxId(boxReference);
 
   const { className: labelClassName, ...restLabelProps } = labelProps || {};
   const { className: hintClassName, ...restHintProps } = hintProps || {};
-  const { className: conditionalClassName, ...restConditionalProps } =
-    conditionalWrapperProps || {};
+  const { className: conditionalClassName, ...restConditionalProps } = conditionalWrapperProps || {};
 
   useEffect(() => () => unleaseReference(boxReference), []);
 

src/components/radios/RadioContext.ts

@@ -3,7 +3,7 @@ import { createContext } from 'react';
 export type IRadiosContext = {
   name: string;
   selectedRadio: string;
-  getRadioId: () => string;
+  getRadioId: (reference: string) => string;
   setConditional: (radioRef: string, hasConditional: boolean) => void;
   setSelected: (radioRef: string) => void;
   leaseReference: () => string;

src/components/radios/Radios.tsx

@@ -1,7 +1,7 @@
 import React, { HTMLProps, PureComponent } from 'react';
 import classNames from 'classnames';
 import { FormElementProps } from '../../util/types/FormTypes';
-import { RadiosContext } from './RadioContext';
+import { RadiosContext, IRadiosContext } from './RadioContext';
 import FormGroup from '../../util/FormGroup';
 import Divider from './components/Divider';
 import Radio from './components/Radio';
@@ -22,6 +22,8 @@ class Radios extends PureComponent<RadiosProps, RadiosState> {
 
   private radioReferences: Array<string> = [];
 
+  private radioIds: Record<string, string> = {};
+
   static defaultProps = {
     role: 'radiogroup',
   };
@@ -34,10 +36,14 @@ class Radios extends PureComponent<RadiosProps, RadiosState> {
     };
   }
 
-  getRadioId = (id: string): string => {
+  getRadioId = (id: string, reference: string): string => {
     const { idPrefix } = this.props;
+    if (reference in this.radioIds) {
+      return this.radioIds[reference];
+    }
     this.radioCount += 1;
-    return `${idPrefix || id}-${this.radioCount}`;
+    this.radioIds[reference] = `${idPrefix || id}-${this.radioCount}`;
+    return this.radioIds[reference];
   };
 
   leaseReference = (): string => {
@@ -78,6 +84,11 @@ class Radios extends PureComponent<RadiosProps, RadiosState> {
     });
   };
 
+  resetRadioIds = () => {
+    this.radioCount = 0;
+    this.radioIds = {};
+  };
+
   static Divider = Divider;
 
   static Radio = Radio;
@@ -87,9 +98,9 @@ class Radios extends PureComponent<RadiosProps, RadiosState> {
     return (
       <FormGroup<RadiosProps> inputType="radios" {...rest}>
         {({ className, inline, name, id, error, ...restRenderProps }) => {
-          this.radioCount = 0;
-          const contextValue = {
-            getRadioId: () => this.getRadioId(id),
+          this.resetRadioIds();
+          const contextValue: IRadiosContext = {
+            getRadioId: reference => this.getRadioId(id, reference),
             selectedRadio: this.state.selectedRadio,
             setConditional: this.setConditional,
             setSelected: this.setSelected,

src/components/radios/components/Radio.tsx

@@ -38,7 +38,7 @@ const Radio: React.FC<RadioProps> = ({
     unleaseReference,
   } = useContext<IRadiosContext>(RadiosContext);
   const [radioReference] = useState<string>(leaseReference());
-  const inputID = id || getRadioId();
+  const inputID = id || getRadioId(radioReference);
 
   useEffect(() => () => unleaseReference(radioReference));