fix(RadioE): Prevent possible loop in click handler

This copies a fix recently applied to CheckboxE to RadioE. This should be less of a problem for RadioE however, as clicks don't toggle their state like they do for checkboxes.

packages/react-component-library/src/components/RadioE/RadioE.test.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import '@testing-library/jest-dom/extend-expect'
 import { render, RenderResult } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
 
 import { FieldProps } from '../../common/FieldProps'
 import { FormProps } from '../../common/FormProps'
@@ -30,6 +31,8 @@ describe('RadioE', () => {
   })
 
   describe('when the field has no errors, a label and a value', () => {
+    let input: HTMLElement
+
     beforeEach(() => {
       label = 'My Label 1'
       field.value = 'option1'
@@ -42,17 +45,40 @@ describe('RadioE', () => {
           label={label}
         />
       )
+
+      input = radio.getByTestId('radio-input')
     })
 
     it('should render a field with a label', () => {
       expect(radio.getByTestId('radio-label')).toHaveTextContent('My Label 1')
     })
 
     it('should populate the field value', () => {
-      expect(radio.queryByTestId('radio-input')).toHaveAttribute(
-        'value',
-        'option1'
-      )
+      expect(input).toHaveAttribute('value', 'option1')
+    })
+
+    describe('and tab is pressed', () => {
+      beforeEach(() => {
+        userEvent.tab()
+      })
+
+      it('focuses the input', () => {
+        expect(input).toHaveFocus()
+      })
+
+      describe('and space is pressed', () => {
+        beforeEach(() => {
+          userEvent.keyboard('[Space]')
+        })
+
+        it('checks the input', () => {
+          expect(input).toBeChecked()
+        })
+
+        it('calls onChange once', () => {
+          expect(field.onChange).toHaveBeenCalledTimes(1)
+        })
+      })
     })
   })
 

packages/react-component-library/src/components/RadioE/RadioE.tsx

@@ -65,8 +65,10 @@ export const RadioE = React.forwardRef<HTMLInputElement, RadioEProps>(
   ) => {
     const localRef = useRef<HTMLInputElement>(null)
 
-    const handleClick = (_: React.MouseEvent<HTMLDivElement>) => {
-      localRef.current.click()
+    const handleClick = (event: React.MouseEvent<HTMLDivElement>) => {
+      if (event.target !== localRef.current) {
+        localRef.current.click()
+      }
     }
 
     const handleKeyUp = (_: React.KeyboardEvent) => {