fix(FormStatus): ensure content given as children will be displayed…

… in linked GlobalStatus (#4547)
dnbexperience · Feb 6, 2025 · bc8f89d · bc8f89d
1 parent 8b0ce9f
commit bc8f89d
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 3 deletions.
diff --git a/packages/dnb-eufemia/src/components/form-status/FormStatus.js b/packages/dnb-eufemia/src/components/form-status/FormStatus.js
@@ -188,14 +188,14 @@ export default class FormStatus extends React.PureComponent {
       (provider) => {
         // gets called once ready
         if (this.props.state === 'error' && this.isReadyToGetVisible()) {
-          const { state, text, globalStatus, label } =
+          const { state, text, children, globalStatus, label } =
             this.getProps(context)
           provider.add({
             state,
             status_id: this.getStatusId(),
             item: {
               item_id: this.state.id,
-              text: globalStatus?.message || text,
+              text: globalStatus?.message || text || children,
               status_anchor_label: label,
               status_anchor_url: true,
             },
@@ -280,7 +280,7 @@ export default class FormStatus extends React.PureComponent {
               status_id,
               item: {
                 item_id: this.state.id,
-                text: globalStatus?.message || text,
+                text: globalStatus?.message || text || children,
                 status_anchor_label: label,
                 status_anchor_url: true,
               },

diff --git a/packages/dnb-eufemia/src/components/form-status/__tests__/FormStatus.test.tsx b/packages/dnb-eufemia/src/components/form-status/__tests__/FormStatus.test.tsx
@@ -235,6 +235,10 @@ describe('FormStatus component', () => {
       ).toHaveTextContent('Custom GlobalStatus Title')
     })
 
+    expect(
+      document.querySelector('.dnb-global-status__message__content')
+    ).toHaveTextContent('has error')
+
     // Close the GlobalStatus
     rerender(
       <>
@@ -259,6 +263,37 @@ describe('FormStatus component', () => {
         document.querySelector('.dnb-global-status__title')
       ).toBeNull()
     })
+
+    // Show the GlobalStatus and set a custom title
+    rerender(
+      <>
+        <GlobalStatus id="my-status" />
+        <Provider
+          FormStatus={{
+            className: 'bar',
+            globalStatus: {
+              id: 'my-status',
+              show: true,
+              title: 'Custom GlobalStatus Title',
+            },
+          }}
+        >
+          <FormStatus>has error given as children</FormStatus>
+        </Provider>
+      </>
+    )
+
+    expect(document.querySelector('.dnb-form-status')).toHaveClass('bar')
+
+    await waitFor(() => {
+      expect(
+        document.querySelector('.dnb-global-status__title')
+      ).toHaveTextContent('Custom GlobalStatus Title')
+    })
+
+    expect(
+      document.querySelector('.dnb-global-status__message__content')
+    ).toHaveTextContent('has error given as children')
   })
 
   it('should support spacing props', () => {

diff --git a/packages/dnb-eufemia/src/extensions/forms/DataContext/Provider/__tests__/Provider.test.tsx b/packages/dnb-eufemia/src/extensions/forms/DataContext/Provider/__tests__/Provider.test.tsx
@@ -2536,6 +2536,10 @@ describe('DataContext.Provider', () => {
           ).toHaveTextContent(nb.Field.errorSummaryTitle)
         })
 
+        expect(
+          document.querySelector('.dnb-global-status__message__content')
+        ).toHaveTextContent(nb.Field.errorRequired + 'Gå til')
+
         await userEvent.type(input, 'foo')
         fireEvent.blur(input)