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

dnbexperience · Oct 23, 2024 · 6624f51 · 6624f51
1 parent 29ebe55
commit 6624f51
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 0 deletions.
diff --git a/packages/dnb-eufemia/src/components/input-masked/InputMaskedUtils.js b/packages/dnb-eufemia/src/components/input-masked/InputMaskedUtils.js
@@ -308,6 +308,13 @@ export const handleCurrencyMask = ({ mask_options, currency_mask }) => {
 
   maskParams.suffix = ` ${fix}`
 
+  if (
+    typeof currency_mask.allowDecimal === 'undefined' &&
+    typeof maskParams.decimalLimit !== 'undefined'
+  ) {
+    maskParams.allowDecimal = maskParams.decimalLimit > 0
+  }
+
   return maskParams
 }
 

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
@@ -739,6 +739,12 @@ describe('InputMasked component with currency_mask', () => {
     expect(document.querySelector('input').value).toBe('1 234 NOK')
   })
 
+  it('should not append a comma when entering a comma', () => {
+    render(<InputMasked value="12345,1" as_currency decimalLimit={0} />)
+
+    expect(document.querySelector('input').value).toBe('12 345 kr')
+  })
+
   it('should not show mask if placeholder is set', () => {
     const placeholderText = 'Placeholder-text'
 

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', () => {