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 (
-
- {children}
-
- )
+ 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 ? (
{label || labelDescription ? (
-
+
) : (
<> >
)}
@@ -194,7 +189,7 @@ function FieldBlock(props: Props) {
)}
) : (
- label &&
+ label && {label}
)}
{
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 (
+
+
+
+ )
+ }
+
+ render()
+
+ 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(
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 (
+
+
+
+ )
+}