From b856a4699dbc4cf18777a1ebd6d7b361c0ff7e20 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tobias=20H=C3=B8egh?= Date: Tue, 9 Jan 2024 11:43:12 +0100 Subject: [PATCH] fix(Field.Currency): handle big numbers (#3184) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Fixes #3124 - Relies on PR #3185 and will be rebased from main later: ✅ --- .../forms/base-fields/Number/properties.mdx | 4 +-- .../extensions/forms/Field/Number/Number.tsx | 18 ++++++++-- .../Field/Number/__tests__/Number.test.tsx | 36 +++++++++++++++++++ ...er.test.stories.tsx => Number.stories.tsx} | 0 4 files changed, 54 insertions(+), 4 deletions(-) rename packages/dnb-eufemia/src/extensions/forms/Field/Number/stories/{Number.test.stories.tsx => Number.stories.tsx} (100%) diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Number/properties.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Number/properties.mdx index 9a034ff41a0..d37aa4c3ef8 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Number/properties.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Number/properties.mdx @@ -17,8 +17,8 @@ import DataValueReadwriteProperties from '../../data-value-readwrite-properties. | `percent` | `boolean` | _(optional)_ Format a number as percentage. | | `prefix` | `string` | _(optional)_ Text added before the value input. | | `suffix` | `string` | _(optional)_ Text added after the value input. | -| `minimum` | `number` | _(optional)_ Validation for inclusive minimum number value (greater than or equal). | -| `maximum` | `number` | _(optional)_ Validation for inclusive maximum number value (less than or equal). | +| `minimum` | `number` | _(optional)_ Validation for inclusive minimum number value (greater than or equal). Defaults to `Number.MIN_SAFE_INTEGER`. | +| `maximum` | `number` | _(optional)_ Validation for inclusive maximum number value (less than or equal). Defaults to `Number.MAX_SAFE_INTEGER`. | | `exclusiveMinimum` | `number` | _(optional)_ Validation for exclusive minimum number value (greater than). | | `exclusiveMaximum` | `number` | _(optional)_ Validation for exclusive maximum number value (less than). | | `multipleOf` | `number` | _(optional)_ Validation that requires the number to be a multiple of given value. | 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 c458df7edcf..d7614dcb3dc 100644 --- a/packages/dnb-eufemia/src/extensions/forms/Field/Number/Number.tsx +++ b/packages/dnb-eufemia/src/extensions/forms/Field/Number/Number.tsx @@ -112,6 +112,19 @@ function NumberComponent(props: Props) { }, [props.emptyValue] ) + const transformValue = useCallback( + (value: number, currentValue: number) => { + if ( + value > Number.MAX_SAFE_INTEGER || + value < Number.MIN_SAFE_INTEGER + ) { + return currentValue + } + + return value + }, + [] + ) const maskProps: Partial = useMemo(() => { if (currency) { @@ -155,6 +168,7 @@ function NumberComponent(props: Props) { schema, toInput, fromInput, + transformValue, size: props.size !== 'small' && props.size !== 'large' ? 'medium' @@ -174,8 +188,8 @@ function NumberComponent(props: Props) { labelDescription, labelSecondary, value, - minimum, - maximum, + minimum = Number.MIN_SAFE_INTEGER, + maximum = Number.MAX_SAFE_INTEGER, disabled, info, warning, 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 1a89b661f2f..af7c3e839a1 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 @@ -24,6 +24,42 @@ describe('Field.Number', () => { expect(screen.getByLabelText('Number label')).toBeInTheDocument() }) + it('corrects minimum number', () => { + render() + + const input = document.querySelector('input') + + fireEvent.change(input, { + target: { + value: String(Number.MIN_SAFE_INTEGER - 1), + }, + }) + + expect(input).toHaveValue(String(Number.MIN_SAFE_INTEGER - 1)) + + fireEvent.blur(input) + + expect(input).toHaveValue(String(Number.MIN_SAFE_INTEGER)) + }) + + it('corrects maximum number', () => { + render() + + const input = document.querySelector('input') + + fireEvent.change(input, { + target: { + value: String(Number.MAX_SAFE_INTEGER + 1), + }, + }) + + expect(input).toHaveValue(String(Number.MAX_SAFE_INTEGER + 1)) + + fireEvent.blur(input) + + expect(input).toHaveValue(String(Number.MAX_SAFE_INTEGER)) + }) + it('should support disabled prop', () => { const { rerender } = render( diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Number/stories/Number.test.stories.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/Number/stories/Number.stories.tsx similarity index 100% rename from packages/dnb-eufemia/src/extensions/forms/Field/Number/stories/Number.test.stories.tsx rename to packages/dnb-eufemia/src/extensions/forms/Field/Number/stories/Number.stories.tsx