Add Story and a test that fails without the fix

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 { fireEvent, 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,42 @@ 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, handleFocus, handleBlur } =
+        useDataValue({
+          value: '',
+          fromInput,
+        })
+
+      return (
+        <FieldBlock label="Label" forId="unique">
+          <Input
+            id="unique"
+            value={value}
+            on_change={handleChange}
+            on_focus={handleFocus}
+            on_blur={handleBlur}
+          />
+        </FieldBlock>
+      )
+    }
+
+    render(<MockComponent />)
+
+    const label = document.querySelector('label')
+    const input = document.querySelector('input')
+
+    await userEvent.type(input, 'foo')
+    fireEvent.blur(input)
+    await userEvent.click(label)
+
+    await waitFor(() => {
+      expect(input).toHaveFocus()
+    })
+  })
+
   it('should not use fieldset/legend elements when no label is given', () => {
     render(
       <FieldBlock>

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>
+  )
+}