fix

dnbexperience · Dec 19, 2024 · c5df341 · c5df341
1 parent d2f5c23
commit c5df341
Show file tree

Hide file tree

Showing 2 changed files with 78 additions and 0 deletions.
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Number/stories/Number.stories.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/Number/stories/Number.stories.tsx
@@ -84,3 +84,23 @@ export const WithFreshValidator = () => {
     </Form.Handler>
   )
 }
+
+export const OnChangeValidatorWithConnectWithPath = () => {
+  const onChangeValidator = (amount: number, { connectWithPath }) => {
+    const { getValue: getMaximum } = connectWithPath('/maximum')
+
+    if (amount > (getMaximum() || 0)) return Error('Cannot exceed maximum')
+    else return undefined
+  }
+
+  return (
+    <Flex.Stack space="large">
+      <Field.Number label="Maximum" path="/maximum" />
+      <Field.Number
+        label="Amount"
+        path="/amount"
+        onChangeValidator={onChangeValidator}
+      />
+    </Flex.Stack>
+  )
+}
diff --git a/packages/dnb-eufemia/src/extensions/forms/hooks/__tests__/useFieldProps.test.tsx b/packages/dnb-eufemia/src/extensions/forms/hooks/__tests__/useFieldProps.test.tsx
@@ -3482,6 +3482,35 @@ describe('useFieldProps', () => {
 
         expect(screen.queryByRole('alert')).not.toBeInTheDocument()
 
+        // Make a change to the ref input
+        await userEvent.type(inputWithRefValue, '3')
+
+        expect(screen.queryByRole('alert')).toHaveTextContent(
+          'The amount should be greater than 23'
+        )
+      })
+
+      it('should update error message on input change after submitting', async () => {
+        const validator = jest.fn(validatorFn)
+
+        render(
+          <Form.Handler>
+            <Field.Number path="/refValue" defaultValue={2} />
+
+            <Field.Number
+              path="/myNumberWithValidator"
+              defaultValue={2}
+              validator={validator}
+            />
+          </Form.Handler>
+        )
+
+        const [inputWithRefValue] = Array.from(
+          document.querySelectorAll('input')
+        )
+
+        expect(screen.queryByRole('alert')).not.toBeInTheDocument()
+
         // Show error message
         fireEvent.submit(document.querySelector('form'))
 
@@ -4482,6 +4511,35 @@ describe('useFieldProps', () => {
 
         expect(screen.queryByRole('alert')).not.toBeInTheDocument()
 
+        // Make a change to the ref input
+        await userEvent.type(inputWithRefValue, '3')
+
+        expect(screen.queryByRole('alert')).toHaveTextContent(
+          'The amount should be greater than 23'
+        )
+      })
+
+      it('should update error message on input change after submitting', async () => {
+        const onChangeValidator = jest.fn(onChangeValidatorFn)
+
+        render(
+          <Form.Handler>
+            <Field.Number path="/refValue" defaultValue={2} />
+
+            <Field.Number
+              path="/myNumberWithOnChangeValidator"
+              defaultValue={2}
+              onChangeValidator={onChangeValidator}
+            />
+          </Form.Handler>
+        )
+
+        const [inputWithRefValue] = Array.from(
+          document.querySelectorAll('input')
+        )
+
+        expect(screen.queryByRole('alert')).not.toBeInTheDocument()
+
         // Show error message
         fireEvent.submit(document.querySelector('form'))