diff --git a/packages/dnb-eufemia/src/components/input-masked/InputMaskedUtils.js b/packages/dnb-eufemia/src/components/input-masked/InputMaskedUtils.js
index bf8888396ee..b89f8ce8f47 100644
--- 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
index 34712e85abf..265ec9217ff 100644
--- 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()
+
+ 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(
{
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()
+
+ 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
index 97e03e542e1..edfc6271838 100644
--- 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
index e7844d0036d..5228514390f 100644
--- 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(
+
+ )
+ 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(
+
+ )
+ expect(document.querySelector('input')).toHaveValue('1 234 kr')
+ })
+
it('formats in different locale', () => {
render(
@@ -267,6 +281,11 @@ describe('Field.Number', () => {
render()
expect(screen.getByDisplayValue('123,456')).toBeInTheDocument()
})
+
+ it('formats with decimal limit 0', () => {
+ render()
+ expect(screen.getByDisplayValue('123')).toBeInTheDocument()
+ })
})
it('should align input correctly', () => {