From 95b37e72a5eb74fa28c19b7bf4f7957901872974 Mon Sep 17 00:00:00 2001
From: Snorre Kim <snorre.kim@dnb.no>
Date: Tue, 9 Jan 2024 13:53:26 +0100
Subject: [PATCH] fix(FieldBlock): label can be clicked after focusing input
 (#3190)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fixes #2979

The label was an internal component and was re-initialized on each re-render of FieldBlock. Fixed by removing the internal component and instead just generating the props.

---------

Co-authored-by: Tobias Høegh <tobias@tujo.no>
---
 .../forms/FieldBlock/FieldBlock.tsx           | 25 ++++++---------
 .../FieldBlock/__tests__/FieldBlock.test.tsx  | 32 ++++++++++++++++++-
 .../FieldBlock/stories/FieldBlock.stories.tsx | 28 ++++++++++++++++
 3 files changed, 69 insertions(+), 16 deletions(-)
 create mode 100644 packages/dnb-eufemia/src/extensions/forms/FieldBlock/stories/FieldBlock.stories.tsx

diff --git a/packages/dnb-eufemia/src/extensions/forms/FieldBlock/FieldBlock.tsx b/packages/dnb-eufemia/src/extensions/forms/FieldBlock/FieldBlock.tsx
index dd843bd28f6..1e11e54eed7 100644
--- a/packages/dnb-eufemia/src/extensions/forms/FieldBlock/FieldBlock.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/FieldBlock/FieldBlock.tsx
@@ -4,6 +4,7 @@ import { Space, FormLabel, FormStatus } from '../../../components'
 import { FormError, ComponentProps, FieldProps } from '../types'
 import FieldBlockContext from './FieldBlockContext'
 import { findElementInChildren } from '../../../shared/component-helper'
+import type { FormLabelAllProps } from '../../../components/FormLabel'
 
 export type Props = Pick<
   FieldProps,
@@ -146,18 +147,12 @@ function FieldBlock(props: Props) {
     ? 'info'
     : null
 
-  const Label = ({ children }) => {
-    return (
-      <FormLabel
-        element={enableFieldset ? 'legend' : 'label'}
-        forId={enableFieldset ? undefined : forId}
-        space={{ top: 0, bottom: 'x-small' }}
-        size={size}
-        disabled={disabled}
-      >
-        {children}
-      </FormLabel>
-    )
+  const labelProps: FormLabelAllProps = {
+    element: enableFieldset ? 'legend' : 'label',
+    forId: enableFieldset ? undefined : forId,
+    space: { top: 0, bottom: 'x-small' },
+    size,
+    disabled,
   }
 
   return (
@@ -176,14 +171,14 @@ function FieldBlock(props: Props) {
           {labelDescription || labelSecondary ? (
             <div className="dnb-forms-field-block__label">
               {label || labelDescription ? (
-                <Label>
+                <FormLabel {...labelProps}>
                   {label}
                   {labelDescription && (
                     <span className="dnb-forms-field-block__label-description">
                       {labelDescription}
                     </span>
                   )}
-                </Label>
+                </FormLabel>
               ) : (
                 <>&nbsp;</>
               )}
@@ -194,7 +189,7 @@ function FieldBlock(props: Props) {
               )}
             </div>
           ) : (
-            label && <Label>{label}</Label>
+            label && <FormLabel {...labelProps}>{label}</FormLabel>
           )}
 
           <div
diff --git a/packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/FieldBlock.test.tsx b/packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/FieldBlock.test.tsx
index 88d0558271e..af83397f4cd 100644
--- a/packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/FieldBlock.test.tsx
+++ b/packages/dnb-eufemia/src/extensions/forms/FieldBlock/__tests__/FieldBlock.test.tsx
@@ -1,8 +1,10 @@
 import React from 'react'
-import { render } from '@testing-library/react'
+import { render, waitFor } from '@testing-library/react'
 import { Input } from '../../../../components'
 import FieldBlock from '../FieldBlock'
 import { FormError } from '../../types'
+import userEvent from '@testing-library/user-event'
+import { useDataValue } from '../../hooks'
 
 describe('FieldBlock', () => {
   it('should forward HTML attributes', () => {
@@ -144,6 +146,34 @@ describe('FieldBlock', () => {
     expect(labelElement.textContent).toBe('A Secondary Label')
   })
 
+  it('click on label should set focus on input after value change', async () => {
+    const MockComponent = () => {
+      const fromInput = React.useCallback(({ value }) => value, [])
+      const { value, handleChange } = useDataValue({
+        value: '',
+        fromInput,
+      })
+
+      return (
+        <FieldBlock label="Label" forId="unique">
+          <Input id="unique" value={value} on_change={handleChange} />
+        </FieldBlock>
+      )
+    }
+
+    render(<MockComponent />)
+
+    const label = document.querySelector('label')
+    const input = document.querySelector('input')
+
+    await userEvent.type(input, 'foo')
+    await userEvent.click(label)
+
+    await waitFor(() => {
+      expect(input).toHaveFocus()
+    })
+  })
+
   it('should not use fieldset/legend elements when no label is given', () => {
     render(
       <FieldBlock>
diff --git a/packages/dnb-eufemia/src/extensions/forms/FieldBlock/stories/FieldBlock.stories.tsx b/packages/dnb-eufemia/src/extensions/forms/FieldBlock/stories/FieldBlock.stories.tsx
new file mode 100644
index 00000000000..6f0d34a6663
--- /dev/null
+++ b/packages/dnb-eufemia/src/extensions/forms/FieldBlock/stories/FieldBlock.stories.tsx
@@ -0,0 +1,28 @@
+import React, { useCallback } from 'react'
+import FieldBlock from '../FieldBlock'
+import Input from '../../../../components/Input'
+import { useDataValue } from '../../hooks'
+
+export default {
+  title: 'Eufemia/Extensions/Forms/FieldBlock',
+}
+
+export function FieldBlockLabel() {
+  const fromInput = useCallback(({ value }) => value, [])
+  const { value, handleChange, handleFocus, handleBlur } = useDataValue({
+    value: 'foo',
+    fromInput,
+  })
+
+  return (
+    <FieldBlock label="Label" forId="unique">
+      <Input
+        id="unique"
+        value={value}
+        on_change={handleChange}
+        on_focus={handleFocus}
+        on_blur={handleBlur}
+      />
+    </FieldBlock>
+  )
+}