Enhance resetting

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Number/Examples.tsx

@@ -490,9 +490,7 @@ export const ConditionalInfo = () => {
                 path="/amount"
                 required
                 onBlurValidator={(amount: number, { connectWithPath }) => {
-                  const { getValue: getMaximum } =
-                    connectWithPath('/maximum')
-                  const maximum = getMaximum()
+                  const maximum = connectWithPath('/maximum').getValue()
 
                   if (amount > maximum) {
                     return new FormError('NumberField.errorMaximum', {

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/base-fields/Number/demos.mdx

@@ -86,7 +86,7 @@ Optionally, use the `visibleWhen` modifier function to control when the message
 
 - `onBlur` – The **preferred** UX behavior. It will show the message only when the field is blurred (onBlur).
 - `initially` – It will show the message initially, and later like `onBlur`.
-- `continuously` – It will show the message on every change.
+- `continuously` – It will show and update the message on every field value change.
 - `always` – Same as `initially` and `continuously` together.
 
 <Examples.ConditionalInfo />

packages/dnb-eufemia/src/extensions/forms/Field/Number/__tests__/Number.test.tsx

@@ -248,11 +248,13 @@ describe('Field.Number', () => {
             document.querySelector('.dnb-form-status')
           ).not.toBeInTheDocument()
 
+          await userEvent.type(input, '4')
+
           expect(
             document.querySelector('.dnb-form-status')
           ).not.toBeInTheDocument()
 
-          await userEvent.type(input, '4')
+          await userEvent.tab()
 
           expect(
             document.querySelector('.dnb-form-status')
@@ -264,7 +266,6 @@ describe('Field.Number', () => {
             document.querySelector('.dnb-form-status')
           ).not.toBeInTheDocument()
 
-          await userEvent.tab()
           await userEvent.type(input, '4')
 
           expect(

packages/dnb-eufemia/src/extensions/forms/Field/Number/stories/Number.stories.tsx

@@ -91,7 +91,7 @@ export const ConditionalInfo = () => {
     { visibleWhen, getValueByPath, getFieldByPath }
   ) => {
     if (maximum < getValueByPath('/amount')) {
-      visibleWhen('continuously')
+      visibleWhen('initially')
 
       const { props, id } = getFieldByPath('/amount')
 
@@ -122,8 +122,7 @@ export const ConditionalInfo = () => {
     amount: number,
     { connectWithPath }
   ) => {
-    const { getValue: getMaximum } = connectWithPath('/maximum')
-    const maximum = getMaximum()
+    const maximum = connectWithPath('/maximum').getValue()
 
     if (amount > maximum) {
       return new FormError('NumberField.errorMaximum', {

packages/dnb-eufemia/src/extensions/forms/FieldBlock/FieldBlock.tsx

@@ -179,7 +179,7 @@ function FieldBlock(props: Props) {
   const { index: iterateIndex } = iterateItemContext ?? {}
 
   const blockId = useId(props.id)
-  const [wasUpdated, forceUpdate] = useReducer(() => ({}), {})
+  const [salt, forceUpdate] = useReducer(() => ({}), {})
   const mountedFieldsRef = useRef<MountedFieldsRef>({})
   const fieldStateRef = useRef<SubmitState>(null)
   const stateRecordRef = useRef<StateRecord>({})
@@ -309,17 +309,8 @@ function FieldBlock(props: Props) {
     [nestedFieldBlockContext]
   )
 
-  const hasStateRecord = useCallback(
-    (state: StateTypes) => {
-      return stateRecordRef.current[blockId]?.some(
-        (item) => item.type === state
-      )
-    },
-    [blockId]
-  )
-
   const statusContent = useMemo(() => {
-    if (typeof errorProp !== 'undefined' || hasStateRecord('error')) {
+    if (typeof errorProp !== 'undefined') {
       setInternalRecord({
         identifier: blockId,
         showInitially: hasInitiallyErrorProp,
@@ -328,7 +319,7 @@ function FieldBlock(props: Props) {
       })
     }
 
-    if (typeof warning !== 'undefined' || hasStateRecord('warning')) {
+    if (typeof warning !== 'undefined') {
       setInternalRecord({
         identifier: blockId,
         showInitially: true,
@@ -337,7 +328,7 @@ function FieldBlock(props: Props) {
       })
     }
 
-    if (typeof info !== 'undefined' || hasStateRecord('info')) {
+    if (typeof info !== 'undefined') {
       setInternalRecord({
         identifier: blockId,
         showInitially: true,
@@ -449,21 +440,18 @@ function FieldBlock(props: Props) {
       }
 
       return acc
-    }, {}) as StatusContent
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, salt) as StatusContent
   }, [
     errorProp,
-    hasStateRecord,
     warning,
     info,
+    salt,
     setInternalRecord,
     blockId,
     hasInitiallyErrorProp,
     props.id,
     forId,
     label,
-    wasUpdated, // wasUpdated is needed to get the current errors
   ])
 
   // Handle the error prop from outside

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

@@ -363,6 +363,11 @@ export default function useFieldProps<Value, EmptyValue, Props>(
           getFieldByPath,
         })
 
+        if (msg === undefined) {
+          messageCacheRef.current.message = undefined
+          return null // hide the message
+        }
+
         const isError =
           msg instanceof Error ||
           msg instanceof FormError ||
@@ -424,6 +429,7 @@ export default function useFieldProps<Value, EmptyValue, Props>(
     },
     [getFieldByPath, getValueByPath]
   )
+
   const error = executeMessage<
     Error | FormError | Array<Error | FormError>
   >(errorProp)
@@ -711,6 +717,8 @@ export default function useFieldProps<Value, EmptyValue, Props>(
     ? prepareError(error) ??
       localErrorRef.current ??
       contextErrorRef.current
+    : error === null
+    ? null
     : undefined
 
   const hasVisibleError =