fix(InputMasked): expose inner_ref input element when useRef is used (#…

…2042)
dnbexperience · May 31, 2023 · 28b0a82 · 28b0a82
1 parent 85412de
commit 28b0a82
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 20 deletions.
diff --git a/packages/dnb-eufemia/src/components/input-masked/InputMasked.js b/packages/dnb-eufemia/src/components/input-masked/InputMasked.js
@@ -12,7 +12,7 @@ import InputMaskedElement from './InputMaskedElement'
 import Input, { inputPropTypes } from '../input/Input'
 import Context from '../../shared/Context'
 
-const InputMasked = React.forwardRef((props, ref) => {
+const InputMasked = (props) => {
   const context = React.useContext(Context)
 
   // Remove masks defined in Provider/Context, because it overwrites a custom mask
@@ -37,15 +37,14 @@ const InputMasked = React.forwardRef((props, ref) => {
   return (
     <InputMaskedContext.Provider
       value={{
-        inner_ref: ref,
         props: contextAndProps,
         context,
       }}
     >
       <InputMaskedElement />
     </InputMaskedContext.Provider>
   )
-})
+}
 
 export default InputMasked
 

diff --git a/packages/dnb-eufemia/src/components/input-masked/InputMaskedHooks.js b/packages/dnb-eufemia/src/components/input-masked/InputMaskedHooks.js
@@ -66,18 +66,6 @@ export const useFilteredProps = () => {
   return { props, htmlAttributes: Object.freeze(attributes) }
 }
 
-/**
- * Returns either given component property ref or new internal ref
- *
- * @returns React ref
- */
-export const useInputElementRef = () => {
-  const { props } = React.useContext(InputMaskedContext)
-  return typeof props?.inner_ref?.current !== 'undefined'
-    ? props?.inner_ref
-    : React.createRef()
-}
-
 /**
  * Returns locale from either component or context
  *
@@ -217,7 +205,6 @@ export const useMaskParams = () => {
  * @returns React Element
  */
 export const useInputElement = () => {
-  const ref = useInputElementRef()
   const { props } = React.useContext(InputMaskedContext)
 
   const { pipe } = props
@@ -226,6 +213,9 @@ export const useInputElement = () => {
   const { showMask, showGuide, placeholderChar, keepCharPositions } =
     useMaskParams()
 
+  const _ref = React.useRef()
+  const ref = props?.inner_ref || _ref
+
   // Create the actual input element
   const inputElementRef = React.useRef(<input ref={ref} />)
 

diff --git a/packages/dnb-eufemia/src/components/input-masked/__tests__/InputMasked.test.js b/packages/dnb-eufemia/src/components/input-masked/__tests__/InputMasked.test.js
@@ -69,11 +69,18 @@ describe('InputMasked component', () => {
   })
 
   it('gets valid ref element', () => {
-    const ref = React.createRef()
-    mount(<Component {...props} inner_ref={ref} />)
+    let ref
+
+    function MockComponent() {
+      ref = React.useRef()
+      return <Component {...props} inner_ref={ref} />
+    }
+
+    render(<MockComponent />)
 
     expect(ref.current instanceof window.HTMLInputElement).toBe(true)
     expect(ref.current.id).toBe(props.id)
+    expect(ref.current.tagName).toBe('INPUT')
   })
 
   it('event "on_change" gets emmited with correct value', () => {

diff --git a/.../dnb-eufemia/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.js.snap b/.../dnb-eufemia/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`InputMasked component have to match type="text" snapshot 1`] = `
-<ForwardRef
+<InputMasked
   align={null}
   as_currency={null}
   as_number={null}
@@ -232,7 +232,7 @@ exports[`InputMasked component have to match type="text" snapshot 1`] = `
       </span>
     </Input>
   </InputMaskedElement>
-</ForwardRef>
+</InputMasked>
 `;
 
 exports[`InputMasked scss have to match snapshot 1`] = `