fix(Field.Number): decimalLimit={0} when currency should work (#4167

) This PR makes it so that the user can't enter any decimals while doing: `<Field.Currency decimalLimit={0} />` --------- Co-authored-by: Tobias Høegh <[email protected]>
dnbexperience · Oct 23, 2024 · 68123ea · 68123ea
1 parent ad5bbec
commit 68123ea
Show file tree

Hide file tree

Showing 5 changed files with 81 additions and 8 deletions.
diff --git a/packages/dnb-eufemia/src/components/input-masked/InputMaskedUtils.js b/packages/dnb-eufemia/src/components/input-masked/InputMaskedUtils.js
@@ -289,26 +289,35 @@ export const handlePercentMask = ({ props, locale, maskParams }) => {
  * @returns object maskParams
  */
 export const handleCurrencyMask = ({ mask_options, currency_mask }) => {
-  const maskParams = {
+  const givenParams = {
+    ...mask_options,
+    ...currency_mask,
+  }
+  const paramsWithDefaults = {
     showMask: true,
     placeholderChar: null,
     allowDecimal: true,
     decimalLimit: 2,
     decimalSymbol: ',',
-    ...mask_options,
-    ...currency_mask,
+    ...givenParams,
   }
 
-  const fix =
+  const suffix =
     typeof currency_mask === 'string'
       ? currency_mask
-      : typeof maskParams.currency === 'string'
-      ? maskParams.currency
+      : typeof givenParams.currency === 'string'
+      ? givenParams.currency
       : 'kr'
+  paramsWithDefaults.suffix = ` ${suffix}`
 
-  maskParams.suffix = ` ${fix}`
+  if (
+    typeof givenParams?.allowDecimal === 'undefined' &&
+    typeof givenParams?.decimalLimit === 'number'
+  ) {
+    paramsWithDefaults.allowDecimal = givenParams.decimalLimit > 0
+  }
 
-  return maskParams
+  return paramsWithDefaults
 }
 
 /**

diff --git a/packages/dnb-eufemia/src/components/input-masked/__tests__/InputMasked.test.tsx b/packages/dnb-eufemia/src/components/input-masked/__tests__/InputMasked.test.tsx
@@ -1416,6 +1416,33 @@ describe('InputMasked component as_currency', () => {
     expect(document.querySelector('input').value).toBe('12 345,67 kr')
   })
 
+  it('should prevent a comma when decimalLimit=0', () => {
+    render(<InputMasked as_currency currency_mask={{ decimalLimit: 0 }} />)
+
+    const preventDefault = jest.fn()
+    const event = { preventDefault }
+
+    const newValue = '12 345'
+
+    fireEvent.change(document.querySelector('input'), {
+      target: { value: newValue },
+      ...event,
+    })
+
+    const pressDotAndUseItAscomma = () => {
+      const keyCode = 188 // comma
+      fireEvent.keyDown(document.querySelector('input'), {
+        keyCode,
+        ...event,
+      })
+    }
+
+    pressDotAndUseItAscomma()
+    pressDotAndUseItAscomma() // try a second time
+
+    expect(document.querySelector('input').value).toBe('12 345 kr')
+  })
+
   it('should inherit currency_mask from provider', () => {
     const { rerender } = render(
       <Provider

diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Currency/__tests__/Currency.test.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/Currency/__tests__/Currency.test.tsx
@@ -3,6 +3,7 @@ import { axeComponent } from '../../../../../core/jest/jestSetup'
 import { render } from '@testing-library/react'
 import { Field } from '../../..'
 import { Provider } from '../../../../../shared'
+import userEvent from '@testing-library/user-event'
 
 describe('Field.Currency', () => {
   it('defaults to "kr" and use "NOK" when locale is en-GB', () => {
@@ -124,6 +125,22 @@ describe('Field.Currency', () => {
     expect(input).toHaveAttribute('inputmode', 'decimal')
   })
 
+  it('should work with decimal limit 0', async () => {
+    render(<Field.Currency decimalLimit={0} />)
+
+    const input = document.querySelector('.dnb-input__input')
+
+    expect(input).toHaveValue('')
+
+    await userEvent.type(document.querySelector('input'), '1')
+
+    expect(input).toHaveValue('1 kr')
+
+    await userEvent.type(document.querySelector('input'), ',')
+
+    expect(input).toHaveValue('1 kr')
+  })
+
   describe('ARIA', () => {
     it('should validate with ARIA rules', async () => {
       const result = render(

diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Number/Number.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/Number/Number.tsx
@@ -307,6 +307,7 @@ function NumberComponent(props: Props) {
         mask_options,
         currency_mask: {
           currencyDisplay,
+          decimalLimit,
         },
       }
     }

diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/Number.test.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/Number.test.tsx
@@ -182,6 +182,13 @@ describe('Field.Number', () => {
         )
         expect(document.querySelector('input')).toHaveValue('1 234,56 %')
       })
+
+      it('formats with percent and decimalLimit 0', () => {
+        render(
+          <Field.Number value={1234.56789} percent decimalLimit={0} />
+        )
+        expect(document.querySelector('input')).toHaveValue('1 234 %')
+      })
     })
 
     describe('currency', () => {
@@ -197,6 +204,13 @@ describe('Field.Number', () => {
         expect(document.querySelector('input')).toHaveValue('1 234,56 kr')
       })
 
+      it('formats with currency and decimalLimit 0', () => {
+        render(
+          <Field.Number value={1234.56789} currency decimalLimit={0} />
+        )
+        expect(document.querySelector('input')).toHaveValue('1 234 kr')
+      })
+
       it('formats in different locale', () => {
         render(
           <Provider locale="en-GB">
@@ -267,6 +281,11 @@ describe('Field.Number', () => {
         render(<Field.Number value={123.456} decimalLimit={4} />)
         expect(screen.getByDisplayValue('123,456')).toBeInTheDocument()
       })
+
+      it('formats with decimal limit 0', () => {
+        render(<Field.Number value={123.456} decimalLimit={0} />)
+        expect(screen.getByDisplayValue('123')).toBeInTheDocument()
+      })
     })
 
     it('should align input correctly', () => {