From 8937bcc7842ba079318215c23d5e47c38fc91aeb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tobias=20H=C3=B8egh?= <tobias@tujo.no>
Date: Sun, 12 Feb 2023 08:27:04 +0100
Subject: [PATCH] fix(InputMasked): avoid inherit mask options and types when
 custom mask is used (#1988)

---
 .../components/input-masked/InputMasked.js    | 12 ++++++++++-
 .../input-masked/InputMaskedHooks.js          |  2 +-
 .../__tests__/InputMasked.test.js             | 20 +++++++++++++++++++
 3 files changed, 32 insertions(+), 2 deletions(-)

diff --git a/packages/dnb-eufemia/src/components/input-masked/InputMasked.js b/packages/dnb-eufemia/src/components/input-masked/InputMasked.js
index 342b9639345..c94525092c7 100644
--- a/packages/dnb-eufemia/src/components/input-masked/InputMasked.js
+++ b/packages/dnb-eufemia/src/components/input-masked/InputMasked.js
@@ -18,6 +18,16 @@ import Context from '../../shared/Context'
 const InputMasked = React.forwardRef((props, ref) => {
   const context = React.useContext(Context)
 
+  // Remove masks defined in Provider/Context, because it overwrites a custom mask
+  if (props?.mask) {
+    const alias = context?.InputMasked
+    for (const key in alias) {
+      if (/^as[_A-Z]|number_mask|currency_mask/.test(key)) {
+        delete alias[key]
+      }
+    }
+  }
+
   const contextAndProps = React.useCallback(
     extendPropsWithContext(
       props,
@@ -97,7 +107,7 @@ InputMasked.propTypes = {
 InputMasked.defaultProps = {
   ...Input.defaultProps,
 
-  mask: [],
+  mask: null,
   number_mask: null,
   currency_mask: null,
   mask_options: null,
diff --git a/packages/dnb-eufemia/src/components/input-masked/InputMaskedHooks.js b/packages/dnb-eufemia/src/components/input-masked/InputMaskedHooks.js
index f39da5586d6..0915b5cd83b 100644
--- a/packages/dnb-eufemia/src/components/input-masked/InputMaskedHooks.js
+++ b/packages/dnb-eufemia/src/components/input-masked/InputMaskedHooks.js
@@ -243,7 +243,7 @@ export const useInputElement = () => {
         inputRef={ref}
         inputElement={inputElementRef.current}
         pipe={pipe}
-        mask={mask}
+        mask={mask || []}
         showMask={showMask}
         guide={showGuide}
         keepCharPositions={keepCharPositions}
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 7547ad16b4c..3093fc88d2b 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
@@ -557,6 +557,26 @@ describe('InputMasked component', () => {
     expect(Comp.find('input').instance().value).toBe('110203 12345')
   })
 
+  it('should ignore mask types from provider, when custom mask is used', () => {
+    render(
+      <Provider
+        value={{
+          InputMasked: {
+            as_number: true,
+            as_currency: true,
+            as_percent: true,
+            number_mask: {},
+            currency_mask: {},
+          },
+        }}
+      >
+        <Component value="123" mask={() => [/\d/, ' ', /\d/, ' ', /\d/]} />
+      </Provider>
+    )
+
+    expect(document.querySelector('input').value).toBe('1 2 3')
+  })
+
   it('should show placeholder chars when show_mask is true', () => {
     const Comp = mount(
       <Component