fix(RadioTile): forward ref to input node (#13130)

Forward ref to input node of RadioTile, such that it behaves the same as other form inputs. Co-authored-by: Francine Lucca <[email protected]>
carbon-design-system · Mar 7, 2023 · 21536a5 · 21536a5
1 parent 36f1bbb
commit 21536a5
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 15 deletions.
diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -5967,6 +5967,7 @@ Map {
     },
   },
   "RadioTile" => Object {
+    "$$typeof": Symbol(react.forward_ref),
     "defaultProps": Object {
       "onChange": [Function],
       "tabIndex": 0,
@@ -6012,6 +6013,7 @@ Map {
         "type": "oneOfType",
       },
     },
+    "render": [Function],
   },
   "Row" => Object {
     "propTypes": Object {

diff --git a/packages/react/src/components/RadioTile/RadioTile-test.js b/packages/react/src/components/RadioTile/RadioTile-test.js
@@ -86,5 +86,13 @@ describe('RadioTile', () => {
 
       expect(screen.getByRole('radio')).toHaveAttribute('value', 'standard');
     });
+
+    it('should pass a given ref to the input element', () => {
+      const ref = React.createRef();
+      render(<RadioTile ref={ref} value="some test value" />);
+
+      expect(ref.current.type).toEqual('radio');
+      expect(ref.current.value).toEqual('some test value');
+    });
   });
 });
diff --git a/packages/react/src/components/RadioTile/RadioTile.js b/packages/react/src/components/RadioTile/RadioTile.js
@@ -14,20 +14,23 @@ import { useFallbackId } from '../../internal/useId';
 import { usePrefix } from '../../internal/usePrefix';
 import deprecate from '../../prop-types/deprecate';
 
-function RadioTile({
-  children,
-  className: customClassName,
-  disabled,
-  // eslint-disable-next-line no-unused-vars
-  light,
-  checked,
-  name,
-  value,
-  id,
-  onChange,
-  tabIndex,
-  ...rest
-}) {
+const RadioTile = React.forwardRef(function RadioTile(
+  {
+    children,
+    className: customClassName,
+    disabled,
+    // eslint-disable-next-line no-unused-vars
+    light,
+    checked,
+    name,
+    value,
+    id,
+    onChange,
+    tabIndex,
+    ...rest
+  },
+  ref
+) {
   const prefix = usePrefix();
   const inputId = useFallbackId(id);
   const className = cx(
@@ -65,6 +68,7 @@ function RadioTile({
         tabIndex={!disabled ? tabIndex : null}
         type="radio"
         value={value}
+        ref={ref}
       />
       <label {...rest} htmlFor={inputId} className={className}>
         <span className={`${prefix}--tile__checkmark`}>
@@ -74,7 +78,7 @@ function RadioTile({
       </label>
     </>
   );
-}
+});
 
 RadioTile.propTypes = {
   /**