fix(Forms): focus InputMasked when clicking label (#2632)

dnbexperience · Sep 11, 2023 · 3233326 · 3233326
1 parent 61c3681
commit 3233326
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 0 deletions.
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/String.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/String.tsx
@@ -155,6 +155,7 @@ function StringComponent(props: Props) {
         />
       ) : mask ? (
         <InputMasked
+          id={id}
           className={cn}
           mask={mask}
           placeholder={placeholder}

diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/__tests__/String.test.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/__tests__/String.test.tsx
@@ -56,6 +56,26 @@ describe('Field.String', () => {
       expect(screen.getByLabelText('The label')).toBeInTheDocument()
     })
 
+    it('input is connected to label', () => {
+      const { rerender } = render(<Field.String label="Label" />)
+
+      expect(document.querySelector('input').getAttribute('id')).toBe(
+        document.querySelector('label').getAttribute('for')
+      )
+
+      rerender(<Field.String label="Label" multiline />)
+
+      expect(document.querySelector('textarea').getAttribute('id')).toBe(
+        document.querySelector('label').getAttribute('for')
+      )
+
+      rerender(<Field.String label="Label" mask={[/\/d/]} />)
+
+      expect(document.querySelector('input').getAttribute('id')).toBe(
+        document.querySelector('label').getAttribute('for')
+      )
+    })
+
     it('renders error', () => {
       render(<Field.String error={new Error('This is what went wrong')} />)
       expect(