fix(Forms): ensure labels do update when they change (async fields) (#…

…3910)

In the submit indicator component we check if a label/text did wrap to a
new line, because of too little space. In this check routine we
insert/manipulate the DOM via `element.textContent`. But this check
messes up with React and makes so that the given children is
re-inserted, so new children/label will not be shown.
We can fix this chancing the `key` of the element.

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

@@ -9,11 +9,6 @@ import locales from '../../../constants/locales'
 const nbNO = locales['nb-NO']
 const enGB = locales['en-GB']
 
-beforeEach(() => {
-  // Reset locale to nb-NO
-  render(<Provider locale="nb-NO">nothing</Provider>)
-})
-
 describe('Field.PhoneNumber', () => {
   it('should default to 47', () => {
     render(<Field.PhoneNumber />)

packages/dnb-eufemia/src/extensions/forms/Form/SubmitButton/__tests__/SubmitButton.test.tsx

@@ -6,11 +6,6 @@ import { Provider } from '../../../../../shared'
 import nbNO from '../../../constants/locales/nb-NO'
 const nb = nbNO['nb-NO']
 
-afterEach(() => {
-  // Reset locale to nb-NO
-  render(<Provider locale="nb-NO">nothing</Provider>)
-})
-
 describe('Form.SubmitButton', () => {
   it('should call "onSubmit" on form element', () => {
     const onSubmit = jest.fn()

packages/dnb-eufemia/src/extensions/forms/Form/SubmitIndicator/SubmitIndicator.tsx

@@ -1,4 +1,4 @@
-import React, { useLayoutEffect, useRef, useState } from 'react'
+import React, { useMemo, useRef, useState } from 'react'
 import classnames from 'classnames'
 import { Icon, Space, Tooltip } from '../../../../components'
 import type { SpaceProps } from '../../../../components/Space'
@@ -9,6 +9,11 @@ import {
   pickSpacingProps,
 } from '../../../../components/flex/utils'
 import { useTranslation } from '../../../../shared'
+import { convertJsxToString } from '../../../../shared/component-helper'
+
+// SSR warning fix: https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85
+const useLayoutEffect =
+  typeof window === 'undefined' ? React.useEffect : React.useLayoutEffect
 
 export type Props = {
   state: SubmitState
@@ -28,6 +33,7 @@ function SubmitIndicator(props: Props) {
   const translation = useTranslation()
   const childrenRef = useRef<HTMLSpanElement>(null)
   const [willWrap, setWillWrap] = useState(false)
+  const key = useMemo(() => convertJsxToString(children), [children])
 
   useLayoutEffect(() => {
     if (children && state) {
@@ -84,7 +90,11 @@ function SubmitIndicator(props: Props) {
 
   return (
     <Space {...params} element="span">
-      {children && <span ref={childrenRef}>{children}</span>}
+      {children && (
+        <span ref={childrenRef} key={key}>
+          {children}
+        </span>
+      )}
       {indicator}
     </Space>
   )

packages/dnb-eufemia/src/extensions/forms/Form/SubmitIndicator/__tests__/SubmitIndicator.test.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import { render } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
 import { Form } from '../../..'
 import { axeComponent } from '../../../../../core/jest/jestSetup'
 
@@ -195,4 +196,29 @@ describe('Form.SubmitIndicator', () => {
       'dnb-forms-submit-indicator--inline-wrap'
     )
   })
+
+  it('should update children (label) when it changes', async () => {
+    const MockComponent = () => {
+      const [count, increment] = React.useReducer((state) => state + 1, 1)
+      return (
+        <>
+          <Form.SubmitIndicator state="success">
+            Label {count}
+          </Form.SubmitIndicator>
+          <button onClick={increment}>{count}</button>
+        </>
+      )
+    }
+
+    render(<MockComponent />)
+
+    const button = document.querySelector('button')
+    const element = document.querySelector('.dnb-forms-submit-indicator')
+
+    expect(element).toHaveTextContent('Label 1')
+
+    await userEvent.click(button)
+
+    expect(element).toHaveTextContent('Label 2')
+  })
 })