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