From 227569cb43f86ccfcafcd5675eb139e320c176f6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tobias=20H=C3=B8egh?= <tobias@tujo.no>
Date: Mon, 9 Sep 2024 09:36:44 +0200
Subject: [PATCH] fix(Forms): ensure label supports HTML formatting (#3911)

Here is a
[demo](https://eufemia-git-fix-field-block-label-html-eufemia.vercel.app/uilib/extensions/forms/Form/Handler/#complex-async-autosave-example)
of this feature (without HTML).

And here is a quick screen recording where the label has HTML inside:


https://github.com/user-attachments/assets/56fdc553-b78c-4b88-9de3-fb696c710c68
---
 .../Form/SubmitIndicator/SubmitIndicator.tsx  |  6 +-
 .../__tests__/SubmitIndicator.test.tsx        | 63 +++++++++++++++++++
 2 files changed, 66 insertions(+), 3 deletions(-)

diff --git a/packages/dnb-eufemia/src/extensions/forms/Form/SubmitIndicator/SubmitIndicator.tsx b/packages/dnb-eufemia/src/extensions/forms/Form/SubmitIndicator/SubmitIndicator.tsx
index 93d0fea761f..e7ea2d6e990 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Form/SubmitIndicator/SubmitIndicator.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Form/SubmitIndicator/SubmitIndicator.tsx
@@ -105,11 +105,11 @@ function willWordWrap(element: HTMLElement, word: string) {
     return
   }
 
-  const { offsetHeight, textContent } = element
+  const { offsetHeight, innerHTML } = element
 
-  element.textContent += word
+  element.innerHTML += word
   const height = element.offsetHeight
-  element.textContent = textContent
+  element.innerHTML = innerHTML
 
   return height > offsetHeight
 }
diff --git a/packages/dnb-eufemia/src/extensions/forms/Form/SubmitIndicator/__tests__/SubmitIndicator.test.tsx b/packages/dnb-eufemia/src/extensions/forms/Form/SubmitIndicator/__tests__/SubmitIndicator.test.tsx
index 2d3a8a1f203..84c115537cc 100644
--- a/packages/dnb-eufemia/src/extensions/forms/Form/SubmitIndicator/__tests__/SubmitIndicator.test.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/Form/SubmitIndicator/__tests__/SubmitIndicator.test.tsx
@@ -197,6 +197,69 @@ describe('Form.SubmitIndicator', () => {
     )
   })
 
+  it('should support HTML content', () => {
+    Object.defineProperties(HTMLElement.prototype, {
+      offsetHeight: {
+        get: () => 10,
+      },
+    })
+
+    const { rerender } = render(
+      <Form.SubmitIndicator state="pending">
+        Text of a <b>bold</b> label 1
+      </Form.SubmitIndicator>
+    )
+
+    const element = document.querySelector('.dnb-forms-submit-indicator ')
+    expect(element).not.toHaveClass(
+      'dnb-forms-submit-indicator--inline-wrap'
+    )
+
+    expect(element.querySelector('span').innerHTML).toBe(
+      'Text of a <b>bold</b> label 1'
+    )
+
+    let count = 0
+    Object.defineProperties(HTMLElement.prototype, {
+      offsetHeight: {
+        get: () => {
+          count++
+          return 10 * count
+        },
+      },
+    })
+
+    rerender(
+      <Form.SubmitIndicator state="pending">
+        Text of a <b>bold</b> label 2
+      </Form.SubmitIndicator>
+    )
+
+    expect(element).toHaveClass('dnb-forms-submit-indicator--inline-wrap')
+    expect(element.querySelector('span').innerHTML).toBe(
+      'Text of a <b>bold</b> label 2'
+    )
+
+    Object.defineProperties(HTMLElement.prototype, {
+      offsetHeight: {
+        get: () => 30,
+      },
+    })
+
+    rerender(
+      <Form.SubmitIndicator state="pending">
+        Text of a <b>bold</b> label 3
+      </Form.SubmitIndicator>
+    )
+
+    expect(element).not.toHaveClass(
+      'dnb-forms-submit-indicator--inline-wrap'
+    )
+    expect(element.querySelector('span').innerHTML).toBe(
+      'Text of a <b>bold</b> label 3'
+    )
+  })
+
   it('should update children (label) when it changes', async () => {
     const MockComponent = () => {
       const [count, increment] = React.useReducer((state) => state + 1, 1)