feat(Radio): add innerRef prop to link a React Ref to the input element

packages/dnb-design-system-portal/src/docs/uilib/components/radio/properties.mdx

@@ -17,6 +17,7 @@ showTabs: true
 | `status_state`   | _(optional)_ defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`.                                                   |
 | `status_props`   | _(optional)_ use an object to define additional FormStatus properties.                                                                                                  |
 | `globalStatus`   | _(optional)_ the [configuration](/uilib/components/global-status/properties/#configuration-object) used for the target [GlobalStatus](/uilib/components/global-status). |
+| `innerRef`       | _(optional)_ by providing a React.ref we can get the internally used input element (DOM). E.g. `innerRef={myRef}` by using `React.createRef()` or `React.useRef()`.     |
 
 ## `Radio.Group` properties
 

packages/dnb-eufemia/src/components/radio/Radio.d.ts

@@ -83,6 +83,10 @@ export interface RadioProps
    */
   on_change?: (...args: any[]) => any;
   on_state_update?: (...args: any[]) => any;
+  /**
+   * By providing a React.ref we can get the internally used input element (DOM). E.g. `innerRef={myRef}` by using `React.createRef()` or `React.useRef()`.
+   */
+  innerRef?: React.Ref;
 }
 export default class Radio extends React.Component<RadioProps, any> {
   static defaultProps: object;

packages/dnb-eufemia/src/components/radio/Radio.js

@@ -79,6 +79,7 @@ export default class Radio extends React.PureComponent {
     attributes: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
     skeleton: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
     readOnly: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+    innerRef: PropTypes.object,
 
     ...spacingPropTypes,
 
@@ -145,7 +146,7 @@ export default class Radio extends React.PureComponent {
 
   constructor(props) {
     super(props)
-    this._refInput = React.createRef()
+    this._refInput = props.innerRef || React.createRef()
     this._id = props.id || makeUniqueId() // cause we need an id anyway
     this.state = {
       _listenForPropChanges: true,
@@ -300,6 +301,7 @@ export default class Radio extends React.PureComponent {
             children, // eslint-disable-line
             on_change, // eslint-disable-line
             on_state_update, // eslint-disable-line
+            innerRef, // eslint-disable-line
 
             ...rest
           } = props

packages/dnb-eufemia/src/components/radio/__tests__/Radio.test.tsx

@@ -332,6 +332,19 @@ describe('Radio ARIA', () => {
       })
     ).toHaveNoViolations()
   })
+
+  it('gets valid ref element', () => {
+    let ref: React.RefObject<HTMLInputElement>
+
+    function MockComponent() {
+      ref = React.useRef()
+      return <Radio {...props} innerRef={ref} />
+    }
+
+    render(<MockComponent />)
+
+    expect(ref.current.classList).toContain('dnb-radio__input')
+  })
 })
 
 describe('Radio scss', () => {