feat(forms): improved state management and reacting to more changed props #2882

henit · 2023-11-10T11:44:50Z

There has been som limitations in the handling of changed external props, as well as the prioritization between different error sources. The different issues are closely linked together, so here are a summary of the changes:

Errors from Provider and local errors in field components could overwrite each other incorrectly because they where put in the same state. They now have separate states in useDataValue and both are taken into account when returning an error to display in the component (as part of the return value of the hook)
Depdendencies on external props (like errorMessages, schema and validator) in validator callbacks could lead to endless loops because they revalidated when something changed, creating a new error object and if the props was recreated (like if a field component did not memoize errorMessages), that would trigger re-validation giving a new error object and so on (endless loop). To avoid this problem, all state in both useDataValue and Provider are now put in useRef instead of useState, and a function check if validation leads to the same error that is already in the error state, and if so, it skips replacing it and re-rendering the component.
Some props was not monitored for external changes, or not re-validated so that a new value kept the error state from the previous value.
Custom hooks for mount effects (only run on mount) and update effects (not running on mount), with tests.
A custom hook ensure that race conditions does not cause problems. An example was when a unit test ran, the validation triggered by the first mount (validating the initial value) and then re-validating after a change callback, but some times the mount validation process finished after the change validation process, setting the error state based on the initial value, while a changed value was in the state. This is avoided using the new useProcessManager hook in useDataValue.
Rewritten validation code for better readability
Various small improvements and bugfixes

vercel · 2023-11-10T11:44:55Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
eufemia	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 13, 2023 1:25pm

codesandbox-ci · 2023-11-10T11:50:20Z

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 77c63d9:

Sandbox	Source
eufemia-starter	Configuration

tujoworker

Well done 👏

tujoworker · 2023-11-11T05:03:04Z

packages/dnb-eufemia/src/extensions/forms/Field/OrganizationNumber/OrganizationNumber.tsx

+  const mask = useMemo(
+    () =>
+      omitMask
+        ? [/\d/, /\d/, /\d/, /\d/, /\d/, /\d/, /\d/, /\d/, /\d/]


Suggested change

? [/\d/, /\d/, /\d/, /\d/, /\d/, /\d/, /\d/, /\d/, /\d/]

? Array(9).fill(/\d/)

😄

tujoworker · 2023-11-11T05:06:44Z

packages/dnb-eufemia/src/extensions/forms/Field/SelectCountry/SelectCountry.tsx

@@ -33,7 +38,7 @@ function SelectCountry(props: Props) {
          title={country.i18n[lang] ?? country.i18n.en}
        />
      )),
-    [sharedContext.locale]
+    [lang]


packages/dnb-eufemia/src/extensions/forms/hooks/useDataValue.ts

tujoworker · 2023-11-11T05:24:31Z

packages/dnb-eufemia/src/extensions/forms/hooks/__tests__/useDataValue.test.ts

This change is not needed technically. But I'm fine with it.

## [10.14.0](v10.13.0...v10.14.0) (2023-11-16) ### 📝 Documentation * **Forms:** lists component specific props 1st ([#2892](#2892)) ([c05740c](c05740c)) * **PhoneNumber:** remove unsupported props ([#2894](#2894)) ([4800a8e](4800a8e)) * **PostalCodeAndCity:** remove unsupported props ([#2890](#2890)) ([fe1ee9e](fe1ee9e)) ### ✨ Features * **Forms:** expiry field ([#2660](#2660)) ([af5aa61](af5aa61)) * **forms:** improved state management and reacting to more changed props ([#2882](#2882)) ([0ca9533](0ca9533)) * **Input:** add clear button event "on_clear" ([#2898](#2898)) ([eb6b722](eb6b722)) * **Radio:** Sbanken styling ([#2888](#2888)) ([d7ffcf8](d7ffcf8)) ### 🐛 Bug Fixes * add "use client" to non hook components like the Button ([#2895](#2895)) ([2d54a13](2d54a13)) * **Autocomplete:** enhance logic for when to blur ([#2886](#2886)) ([ce5c3fa](ce5c3fa)) * **Autocomplete:** make clear button work with enter key ([#2901](#2901)) ([30007c4](30007c4)), closes [#2185](#2185) * **FieldBlock:** enhance fieldset/legend detection ([#2902](#2902)) ([4c62052](4c62052)), closes [#2893](#2893) * fix Flex and Grid export to work with Vite.js ([#2905](#2905)) ([ef83713](ef83713)) * fix vertical label_direction support for Radio group and ToggleButton group ([#2899](#2899)) ([d650c66](d650c66)) * **forms:** Field block error handling ([#2900](#2900)) ([9582c64](9582c64)) * **forms:** Improved message value replacements ([#2903](#2903)) ([a61140b](a61140b)) * **PhoneNumber:** keep selected countryCode value on blur ([#2869](#2869)) ([7e0f9c5](7e0f9c5))

tujoworker · 2023-11-16T19:14:34Z

🎉 This PR is included in version 10.14.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

tujoworker changed the title ~~Improved state management and reacting to more changed props~~ feat(forms): improved state management and reacting to more changed props Nov 10, 2023

henit force-pushed the fix/forms-context-and-local-validation-sync branch from e59f2ac to 8c526bf Compare November 10, 2023 14:29

vercel bot deployed to Preview November 10, 2023 14:41 View deployment

tujoworker approved these changes Nov 11, 2023

View reviewed changes

henit added 3 commits November 13, 2023 11:23

Improved state management and reacting to more changed props

a0995d6

Lint fixes

b348a59

Fix for error message value injection

5f17902

henit force-pushed the fix/forms-context-and-local-validation-sync branch from 15ce87d to 5f17902 Compare November 13, 2023 10:23

vercel bot deployed to Preview November 13, 2023 10:40 View deployment

vercel bot deployed to Preview November 13, 2023 13:07 View deployment

Schema-fix

77c63d9

henit force-pushed the fix/forms-context-and-local-validation-sync branch from e7201ac to 77c63d9 Compare November 13, 2023 13:09

vercel bot deployed to Preview November 13, 2023 13:25 View deployment

henit merged commit 0ca9533 into main Nov 13, 2023
7 checks passed

henit deleted the fix/forms-context-and-local-validation-sync branch November 13, 2023 15:16

tujoworker added the released label Nov 16, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(forms): improved state management and reacting to more changed props #2882

feat(forms): improved state management and reacting to more changed props #2882

henit commented Nov 10, 2023 •

edited

Loading

vercel bot commented Nov 10, 2023 •

edited

Loading

codesandbox-ci bot commented Nov 10, 2023 •

edited

Loading

tujoworker left a comment

tujoworker Nov 11, 2023

tujoworker Nov 11, 2023

tujoworker Nov 11, 2023

tujoworker commented Nov 16, 2023

	? [/\d/, /\d/, /\d/, /\d/, /\d/, /\d/, /\d/, /\d/, /\d/]
	? Array(9).fill(/\d/)

feat(forms): improved state management and reacting to more changed props #2882

feat(forms): improved state management and reacting to more changed props #2882

Conversation

henit commented Nov 10, 2023 • edited Loading

vercel bot commented Nov 10, 2023 • edited Loading

codesandbox-ci bot commented Nov 10, 2023 • edited Loading

tujoworker left a comment

Choose a reason for hiding this comment

tujoworker Nov 11, 2023

Choose a reason for hiding this comment

tujoworker Nov 11, 2023

Choose a reason for hiding this comment

tujoworker Nov 11, 2023

Choose a reason for hiding this comment

tujoworker commented Nov 16, 2023

henit commented Nov 10, 2023 •

edited

Loading

vercel bot commented Nov 10, 2023 •

edited

Loading

codesandbox-ci bot commented Nov 10, 2023 •

edited

Loading