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