feat: add support for functional refs to various form components

packages/dnb-eufemia/src/components/anchor/__tests__/Anchor.test.tsx

@@ -163,6 +163,20 @@ describe('Anchor element', () => {
     expect(ref.current).toBe(element)
   })
 
+  it('gets valid element when ref is function', () => {
+    const ref: React.MutableRefObject<HTMLAnchorElement> =
+      React.createRef()
+
+    const refFn = (elem: HTMLAnchorElement) => {
+      ref.current = elem
+    }
+
+    render(<Anchor id="unique" ref={refFn} />)
+
+    expect(ref.current.getAttribute('id')).toBe('unique')
+    expect(ref.current.tagName).toBe('A')
+  })
+
   it('has aria-describedby when target is blank', () => {
     const { rerender } = render(
       <Anchor href="/url" target="_blank" lang="en-GB">

packages/dnb-eufemia/src/components/autocomplete/__tests__/Autocomplete.test.tsx

@@ -3085,6 +3085,19 @@ describe('Autocomplete component', () => {
       })
     })
   })
+
+  it('gets valid element when input_ref is function', () => {
+    const ref: React.MutableRefObject<HTMLInputElement> = React.createRef()
+
+    const refFn = (elem: HTMLInputElement) => {
+      ref.current = elem
+    }
+
+    render(<Autocomplete id="unique" input_ref={refFn} />)
+
+    expect(ref.current.getAttribute('id')).toBe('unique')
+    expect(ref.current.tagName).toBe('INPUT')
+  })
 })
 
 describe('Autocomplete markup', () => {

packages/dnb-eufemia/src/components/button/__tests__/Button.test.tsx

@@ -167,6 +167,19 @@ describe('Button component', () => {
     expect(typeof ref.current).toBe('object')
   })
 
+  it('gets valid element when innerRef is function', () => {
+    const ref: React.MutableRefObject<HTMLButtonElement> =
+      React.createRef()
+
+    const refFn = (elem: HTMLButtonElement) => {
+      ref.current = elem
+    }
+    render(<Button id="unique" innerRef={refFn} />)
+
+    expect(ref.current.getAttribute('id')).toBe('unique')
+    expect(ref.current.tagName).toBe('BUTTON')
+  })
+
   it('has type of button', () => {
     render(<Button />)
     const button = document.querySelector('button')

packages/dnb-eufemia/src/components/checkbox/Checkbox.js

@@ -78,7 +78,7 @@ export default class Checkbox extends React.PureComponent {
     readOnly: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
     skeleton: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
     class: PropTypes.string,
-    innerRef: PropTypes.object,
+    innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
 
     ...spacingPropTypes,
 
@@ -116,6 +116,8 @@ export default class Checkbox extends React.PureComponent {
 
     on_change: null,
     on_state_update: null,
+
+    innerRef: null,
   }
 
   static parseChecked = (state) => /true|on/.test(String(state))
@@ -142,14 +144,22 @@ export default class Checkbox extends React.PureComponent {
 
   constructor(props) {
     super(props)
-    this._refInput = props.innerRef || React.createRef()
+    this._refInput = React.createRef()
 
     this._id = props.id || makeUniqueId() // cause we need an id anyway
     this.state = {
       _listenForPropChanges: true,
     }
   }
 
+  componentDidMount() {
+    if (this.props.innerRef) {
+      typeof this.props.innerRef === 'function'
+        ? this.props.innerRef(this._refInput.current)
+        : (this.props.innerRef.current = this._refInput.current)
+    }
+  }
+
   onKeyDownHandler = (event) => {
     switch (keycode(event)) {
       case 'enter':

packages/dnb-eufemia/src/components/checkbox/__tests__/Checkbox.test.tsx

@@ -189,12 +189,28 @@ describe('Checkbox component', () => {
 
     function MockComponent() {
       ref = React.useRef()
-      return <Checkbox {...props} innerRef={ref} />
+      return <Checkbox id="unique" innerRef={ref} />
     }
 
     render(<MockComponent />)
 
+    expect(ref.current.getAttribute('id')).toBe('unique')
     expect(ref.current.classList).toContain('dnb-checkbox__input')
+    expect(ref.current.tagName).toBe('INPUT')
+  })
+
+  it('gets valid element when ref is function', () => {
+    const ref: React.MutableRefObject<HTMLInputElement> = React.createRef()
+
+    const refFn = (elem: HTMLInputElement) => {
+      ref.current = elem
+    }
+
+    render(<Checkbox id="unique" innerRef={refFn} />)
+
+    expect(ref.current.getAttribute('id')).toBe('unique')
+    expect(ref.current.classList).toContain('dnb-checkbox__input')
+    expect(ref.current.tagName).toBe('INPUT')
   })
 })
 

packages/dnb-eufemia/src/components/dropdown/__tests__/Dropdown.test.tsx

@@ -1179,6 +1179,21 @@ describe('Dropdown component', () => {
     expect(ref.current instanceof HTMLButtonElement).toBe(true)
   })
 
+  it('gets valid buttonRef element when ref is function', () => {
+    const ref: React.MutableRefObject<HTMLButtonElement> =
+      React.createRef()
+
+    function refFuntion(instance: HTMLButtonElement) {
+      ref.current = instance
+    }
+
+    render(<Dropdown {...props} buttonRef={refFuntion} />)
+
+    expect(ref.current.id).toBe(props.id)
+    expect(ref.current.tagName).toBe('BUTTON')
+    expect(ref.current instanceof HTMLButtonElement).toBe(true)
+  })
+
   it('gets valid innerRef element', () => {
     let ref: React.RefObject<HTMLButtonElement>
 
@@ -1194,6 +1209,21 @@ describe('Dropdown component', () => {
     expect(ref.current instanceof HTMLSpanElement).toBe(true)
   })
 
+  it('gets valid innerRef element when ref is function', () => {
+    const ref: React.MutableRefObject<HTMLButtonElement> =
+      React.createRef()
+
+    function refFuntion(instance: HTMLButtonElement) {
+      ref.current = instance
+    }
+
+    render(<Dropdown {...props} innerRef={refFuntion} />)
+
+    expect(ref.current.className).toContain('dnb-dropdown')
+    expect(ref.current.tagName).toBe('SPAN')
+    expect(ref.current instanceof HTMLSpanElement).toBe(true)
+  })
+
   beforeAll(() => {
     window.resizeTo = function resizeTo({
       width = window.innerWidth,

packages/dnb-eufemia/src/components/input-masked/__tests__/InputMasked.test.tsx

@@ -53,11 +53,9 @@ describe('InputMasked component', () => {
   })
 
   it('gets valid element when ref is function', () => {
-    const ref = React.createRef<HTMLInputElement | null>()
+    const ref: React.MutableRefObject<HTMLInputElement> = React.createRef()
 
     const refFn = (elem: HTMLInputElement) => {
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
       ref.current = elem
     }
 

packages/dnb-eufemia/src/components/input/__tests__/Input.test.tsx

@@ -78,11 +78,9 @@ describe('Input component', () => {
   })
 
   it('gets valid element when ref is function', () => {
-    const ref = React.createRef<HTMLInputElement | null>()
+    const ref: React.MutableRefObject<HTMLInputElement> = React.createRef()
 
     const refFn = (elem: HTMLInputElement) => {
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
       ref.current = elem
     }
 

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

@@ -79,7 +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,
+    innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
 
     ...spacingPropTypes,
 
@@ -118,6 +118,8 @@ export default class Radio extends React.PureComponent {
 
     on_change: null,
     on_state_update: null,
+
+    innerRef: null,
   }
 
   static Group = RadioGroup
@@ -146,13 +148,21 @@ export default class Radio extends React.PureComponent {
 
   constructor(props) {
     super(props)
-    this._refInput = props.innerRef || React.createRef()
+    this._refInput = React.createRef()
     this._id = props.id || makeUniqueId() // cause we need an id anyway
     this.state = {
       _listenForPropChanges: true,
     }
   }
 
+  componentDidMount() {
+    if (this.props.innerRef) {
+      typeof this.props.innerRef === 'function'
+        ? this.props.innerRef(this._refInput.current)
+        : (this.props.innerRef.current = this._refInput.current)
+    }
+  }
+
   onKeyDownHandler = (event) => {
     const key = keycode(event)
     // only have key support if there is only a single radio

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

@@ -197,6 +197,19 @@ describe('Radio ARIA', () => {
 
     expect(ref.current.classList).toContain('dnb-radio__input')
   })
+
+  it('gets valid element when ref is function', () => {
+    const ref: React.MutableRefObject<HTMLInputElement> = React.createRef()
+
+    const refFn = (elem: HTMLInputElement) => {
+      ref.current = elem
+    }
+
+    render(<Radio id="unique" innerRef={refFn} />)
+
+    expect(ref.current.getAttribute('id')).toBe('unique')
+    expect(ref.current.classList).toContain('dnb-radio__input')
+  })
 })
 
 describe('Radio scss', () => {

packages/dnb-eufemia/src/components/switch/Switch.js

@@ -76,7 +76,7 @@ export default class Switch extends React.PureComponent {
     attributes: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
     readOnly: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
     skeleton: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-    innerRef: PropTypes.object,
+    innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
 
     ...spacingPropTypes,
 
@@ -116,6 +116,8 @@ export default class Switch extends React.PureComponent {
     on_change: null,
     on_change_end: null,
     on_state_update: null,
+
+    innerRef: null,
   }
 
   static parseChecked = (state) => /true|on/.test(String(state))
@@ -142,14 +144,22 @@ export default class Switch extends React.PureComponent {
 
   constructor(props) {
     super(props)
-    this._refInput = props.innerRef || React.createRef()
+    this._refInput = React.createRef()
     this._id = props.id || makeUniqueId() // cause we need an id anyway
     this.state = {
       _listenForPropChanges: true,
     }
     this.helperParams = { onMouseDown: (e) => e.preventDefault() }
   }
 
+  componentDidMount() {
+    if (this.props.innerRef) {
+      typeof this.props.innerRef === 'function'
+        ? this.props.innerRef(this._refInput.current)
+        : (this.props.innerRef.current = this._refInput.current)
+    }
+  }
+
   componentWillUnmount() {
     clearTimeout(this._onChangeEndId)
   }

packages/dnb-eufemia/src/components/switch/__tests__/Switch.test.tsx

@@ -185,6 +185,19 @@ describe('Switch component', () => {
 
     expect(ref.current.classList).toContain('dnb-switch__input')
   })
+
+  it('gets valid element when ref is function', () => {
+    const ref: React.MutableRefObject<HTMLInputElement> = React.createRef()
+
+    const refFn = (elem: HTMLInputElement) => {
+      ref.current = elem
+    }
+
+    render(<Switch id="unique" innerRef={refFn} />)
+
+    expect(ref.current.getAttribute('id')).toBe('unique')
+    expect(ref.current.classList).toContain('dnb-switch__input')
+  })
 })
 
 describe('Switch scss', () => {

packages/dnb-eufemia/src/components/textarea/Textarea.js

@@ -195,7 +195,7 @@ export default class Textarea extends React.PureComponent {
   constructor(props) {
     super(props)
 
-    this._ref = props.inner_ref || React.createRef()
+    this._ref = React.createRef()
     this._id = props.id || makeUniqueId() // cause we need an id anyway
 
     // make sure we don't trigger getDerivedStateFromProps on startup
@@ -206,6 +206,12 @@ export default class Textarea extends React.PureComponent {
     this.state._value = props.value
   }
   componentDidMount() {
+    if (this.props.inner_ref) {
+      typeof this.props.inner_ref === 'function'
+        ? this.props.inner_ref(this._ref.current)
+        : (this.props.inner_ref.current = this._ref.current)
+    }
+
     if (isTrue(this.props.autoresize) && typeof window !== 'undefined') {
       this.setAutosize()
       try {

packages/dnb-eufemia/src/components/textarea/__tests__/Textarea.test.tsx

@@ -265,6 +265,37 @@ describe('Textarea component', () => {
 
     expect(await axeComponent(Comp)).toHaveNoViolations()
   })
+
+  it('gets valid ref element', () => {
+    let ref: React.RefObject<HTMLTextAreaElement>
+
+    function MockComponent() {
+      ref = React.useRef()
+      return <Textarea {...props} inner_ref={ref} />
+    }
+
+    render(<MockComponent />)
+
+    expect(ref.current.classList).toContain('dnb-textarea__textarea')
+    expect(ref.current.tagName).toBe('TEXTAREA')
+    expect(ref.current).toBeInstanceOf(HTMLTextAreaElement)
+  })
+
+  it('gets valid element when ref is function', () => {
+    const ref: React.MutableRefObject<HTMLTextAreaElement> =
+      React.createRef()
+
+    const refFn = (elem: HTMLTextAreaElement) => {
+      ref.current = elem
+    }
+
+    render(<Textarea id="unique" inner_ref={refFn} />)
+
+    expect(ref.current.getAttribute('id')).toBe('unique')
+    expect(ref.current.classList).toContain('dnb-textarea__textarea')
+    expect(ref.current.tagName).toBe('TEXTAREA')
+    expect(ref.current).toBeInstanceOf(HTMLTextAreaElement)
+  })
 })
 
 describe('Textarea scss', () => {