diff --git a/packages/dnb-eufemia/src/components/input-masked/InputMasked.js b/packages/dnb-eufemia/src/components/input-masked/InputMasked.js index 607afe73536..73a160e4919 100644 --- 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,7 +37,6 @@ const InputMasked = React.forwardRef((props, ref) => { return ( { ) -}) +} 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 index e0afb29447a..57374a3a43f 100644 --- 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() 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 index d36cb901eea..d15fa6a4128 100644 --- 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() + let ref + + function MockComponent() { + ref = React.useRef() + return + } + + render() 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/packages/dnb-eufemia/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.js.snap b/packages/dnb-eufemia/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.js.snap index 070e5401f6a..b056272d031 100644 --- a/packages/dnb-eufemia/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.js.snap +++ b/packages/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`] = ` - - + `; exports[`InputMasked scss have to match snapshot 1`] = `