fix(FieldBlock): add asFieldset property to let the block use fieldse…

…t/legend
dnbexperience · Oct 23, 2023 · bb80643 · bb80643
1 parent a22fad5
commit bb80643
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 6 deletions.
diff --git a/packages/dnb-eufemia/src/extensions/forms/FieldBlock/FieldBlock.tsx b/packages/dnb-eufemia/src/extensions/forms/FieldBlock/FieldBlock.tsx
@@ -19,6 +19,8 @@ export type Props = Pick<
   forId?: string
   contentClassName?: string
   children: React.ReactNode
+  /** Use true if you have more than one form element */
+  asFieldset?: boolean
   /** Width of outer block element */
   width?: false | 'small' | 'medium' | 'large'
   /** Width of contents block, while label etc can be wider if space is available */
@@ -37,6 +39,7 @@ function FieldBlock(props: Props) {
     label,
     labelDescription,
     labelSecondary,
+    asFieldset,
     info,
     warning,
     error: errorProp,
@@ -127,11 +130,12 @@ function FieldBlock(props: Props) {
   // A child component with a label was found, use fieldset/legend instead of div/label
   const enableFieldset = useMemo(
     () =>
-      !nestedFieldBlockContext &&
-      findElementInChildren(
-        children,
-        (child: React.ReactElement) => child.props.label
-      ),
+      asFieldset ||
+      (!nestedFieldBlockContext &&
+        findElementInChildren(
+          children,
+          (child: React.ReactElement) => child.props.label
+        )),
     []
   )
 
@@ -148,7 +152,7 @@ function FieldBlock(props: Props) {
     return (
       <FormLabel
         element={enableFieldset ? 'legend' : 'label'}
-        for_id={forId}
+        for_id={enableFieldset ? undefined : forId}
         space={{ top: 0, bottom: 'x-small' }}
         size={size}
       >

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
@@ -160,6 +160,20 @@ describe('FieldBlock', () => {
     expect(labelElements[4]).toBe(undefined)
   })
 
+  it('should use fieldset/legend when "asFieldset" is given', () => {
+    render(
+      <FieldBlock label="Legend" asFieldset>
+        content
+      </FieldBlock>
+    )
+
+    expect(document.querySelectorAll('fieldset')).toHaveLength(1)
+    expect(document.querySelectorAll('legend')).toHaveLength(1)
+    expect(document.querySelector('.dnb-forms-field-block').tagName).toBe(
+      'FIELDSET'
+    )
+  })
+
   it('should render a FormStatus when "info" is given', () => {
     render(<FieldBlock info="Info">content</FieldBlock>)