fix(forms): show error when entered Field.Currency or `Field.Number…

…` value exceeds maximum possible amount (#3821) This changes the behaviour added in [this PR](#3184) which again is based on [this issue](#3124). --------- Co-authored-by: Joakim Bjerknes <joakbjerk@gmail.com>
dnbexperience · Aug 14, 2024 · e9cdd68 · e9cdd68
1 parent e43ad59
commit e9cdd68
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 34 deletions.
diff --git a/...m-portal/src/docs/uilib/extensions/forms/feature-fields/Currency/properties.mdx b/...m-portal/src/docs/uilib/extensions/forms/feature-fields/Currency/properties.mdx
@@ -5,17 +5,13 @@ showTabs: true
 import TranslationsTable from 'dnb-design-system-portal/src/shared/parts/TranslationsTable'
 import PropertiesTable from 'dnb-design-system-portal/src/shared/parts/PropertiesTable'
 import { fieldProperties } from '@dnb/eufemia/src/extensions/forms/Field/FieldDocs'
+import { numberProperties } from '@dnb/eufemia/src/extensions/forms/Field/Number/NumberDocs'
 
 ## Properties
 
 ### Field-specific props
 
-| Property                                              | Type     | Description                                                                     |
-| ----------------------------------------------------- | -------- | ------------------------------------------------------------------------------- |
-| `currency`                                            | `string` | _(optional)_ Currency to show the value in. I.e `NOK` or `USD`.                 |
-| `currencyDisplay`                                     | `string` | _(optional)_ Can be `code`, `symbol`, `narrowSymbol` or `name` (kroner).        |
-| `help`                                                | `object` | _(optional)_ Provide a help button. Object consisting of `title` and `content`. |
-| [Number](/uilib/extensions/forms/base-fields/Number/) | Various  | _(optional)_ All Number properties.                                             |
+<PropertiesTable props={numberProperties} valueType="number" />
 
 ### General props
 

diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Currency/CurrencyDocs.ts b/packages/dnb-eufemia/src/extensions/forms/Field/Currency/CurrencyDocs.ts
@@ -0,0 +1,21 @@
+import { PropertiesTableProps } from '../../../../shared/types'
+import { numberProperties } from '../Number/NumberDocs'
+
+export const currencyProperties: PropertiesTableProps = {
+  currency: {
+    doc: 'Defines what format to show the currency value in I.e `NOK` or `USD`.',
+    type: 'string',
+    status: 'optional',
+  },
+  currencyDisplay: {
+    doc: 'Defined the currency display style. Defaults to `code`.',
+    type: ['code', 'symbol', 'narrowSymbol', 'name'],
+    status: 'optional',
+  },
+  help: {
+    doc: 'Provide a help button. Object consisting of `title` and `content`.',
+    type: 'object',
+    status: 'optional',
+  },
+  ...numberProperties,
+}
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Number/Number.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/Number/Number.tsx
@@ -59,6 +59,9 @@ export type Props = FieldHelpProps &
     showStepControls?: boolean
   }
 
+const defaultMinimum = Number.MIN_SAFE_INTEGER
+const defaultMaximum = Number.MAX_SAFE_INTEGER
+
 function NumberComponent(props: Props) {
   const dataContext = useContext(DataContext)
   const fieldBlockContext = useContext(FieldBlockContext)
@@ -92,8 +95,8 @@ function NumberComponent(props: Props) {
     () =>
       props.schema ?? {
         type: 'number',
-        minimum: props.minimum,
-        maximum: props.maximum,
+        minimum: props.minimum ?? defaultMinimum,
+        maximum: props.maximum ?? defaultMaximum,
         exclusiveMinimum: props.exclusiveMinimum,
         exclusiveMaximum: props.exclusiveMaximum,
         multipleOf: props.multipleOf,
@@ -123,19 +126,6 @@ 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<InputMaskedProps> = useMemo(() => {
     const mask_options = {
@@ -190,7 +180,6 @@ function NumberComponent(props: Props) {
     schema,
     toInput,
     fromInput,
-    transformValue,
     width:
       props.width ??
       (fieldBlockContext?.composition ? 'stretch' : 'medium'),
@@ -208,8 +197,8 @@ function NumberComponent(props: Props) {
     labelDescription,
     value,
     startWith = null,
-    minimum = Number.MIN_SAFE_INTEGER,
-    maximum = Number.MAX_SAFE_INTEGER,
+    minimum = defaultMinimum,
+    maximum = defaultMaximum,
     disabled,
     htmlAttributes,
     info,

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
@@ -4,6 +4,9 @@ import { screen, render, fireEvent, act } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { Field, FieldBlock, Form, JSONSchema } from '../../..'
 import { Provider } from '../../../../../shared'
+import nbNO from '../../../constants/locales/nb-NO'
+
+const nb = nbNO['nb-NO']
 
 describe('Field.Number', () => {
   describe('props', () => {
@@ -44,7 +47,7 @@ describe('Field.Number', () => {
       expect(screen.getByLabelText('Number label')).toBeInTheDocument()
     })
 
-    it('corrects minimum number', () => {
+    it('shows error when minimum exceeded', () => {
       render(<Field.Number value={Number.MIN_SAFE_INTEGER} />)
 
       const input = document.querySelector('input')
@@ -59,10 +62,18 @@ describe('Field.Number', () => {
 
       fireEvent.blur(input)
 
-      expect(input).toHaveValue('-9 007 199 254 740 991')
+      expect(input).toHaveValue('-9 007 199 254 740 992')
+
+      expect(screen.getByRole('alert')).toBeInTheDocument()
+      expect(screen.getByRole('alert')).toHaveTextContent(
+        nb.NumberField.errorMinimum.replace(
+          '{minimum}',
+          '-9007199254740991'
+        )
+      )
     })
 
-    it('corrects maximum number', () => {
+    it('shows error when maximum exceeded', () => {
       render(<Field.Number value={Number.MAX_SAFE_INTEGER} />)
 
       const input = document.querySelector('input')
@@ -77,7 +88,15 @@ describe('Field.Number', () => {
 
       fireEvent.blur(input)
 
-      expect(input).toHaveValue('9 007 199 254 740 991')
+      expect(input).toHaveValue('9 007 199 254 740 992')
+
+      expect(screen.getByRole('alert')).toBeInTheDocument()
+      expect(screen.getByRole('alert')).toHaveTextContent(
+        nb.NumberField.errorMaximum.replace(
+          '{maximum}',
+          '9007199254740991'
+        )
+      )
     })
 
     it('should support disabled prop', () => {

diff --git a/packages/dnb-eufemia/src/extensions/forms/Tools/__tests__/ListAllProps.test.tsx b/packages/dnb-eufemia/src/extensions/forms/Tools/__tests__/ListAllProps.test.tsx
@@ -275,8 +275,8 @@ describe('Tools.ListAllProps', () => {
             "schema": {
               "exclusiveMaximum": undefined,
               "exclusiveMinimum": undefined,
-              "maximum": undefined,
-              "minimum": undefined,
+              "maximum": 9007199254740991,
+              "minimum": -9007199254740991,
               "multipleOf": undefined,
               "type": "number",
             },
@@ -649,8 +649,8 @@ describe('Tools.ListAllProps', () => {
               "schema": {
                 "exclusiveMaximum": undefined,
                 "exclusiveMinimum": undefined,
-                "maximum": undefined,
-                "minimum": undefined,
+                "maximum": 9007199254740991,
+                "minimum": -9007199254740991,
                 "multipleOf": undefined,
                 "type": "number",
               },
@@ -675,8 +675,8 @@ describe('Tools.ListAllProps', () => {
               "schema": {
                 "exclusiveMaximum": undefined,
                 "exclusiveMinimum": undefined,
-                "maximum": undefined,
-                "minimum": undefined,
+                "maximum": 9007199254740991,
+                "minimum": -9007199254740991,
                 "multipleOf": undefined,
                 "type": "number",
               },