chore: generate random id/htmlFor if no exist

WTTJ · Jan 5, 2022 · 47c8b29 · 47c8b29
1 parent d2bf428
commit 47c8b29
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 3 deletions.
diff --git a/packages/Field/index.test.tsx b/packages/Field/index.test.tsx
@@ -127,6 +127,8 @@ describe('<Field />', () => {
     const label = field.querySelector('label')
     const input = field.querySelector('input')
 
+    expect(label.htmlFor).toBe('field')
+    expect(label.htmlFor).toBe(input.id)
     userEvent.click(label)
     expect(input).toHaveFocus()
     expect(document.activeElement).toBe(input)
@@ -143,12 +145,14 @@ describe('<Field />', () => {
     const label = field.querySelector('label')
     const input = field.querySelector('input')
 
+    expect(label.htmlFor).toBe('field')
+    expect(label.htmlFor).toBe(input.id)
     userEvent.click(label)
     expect(input).toHaveFocus()
     expect(document.activeElement).toBe(input)
   })
 
-  it.skip('should focus input when click on label when using neither name nor id on input (the fallback value of the id is created randomly)', async () => {
+  it('should focus input when click on label when using neither name nor id on input (the fallback value of the id is created randomly)', async () => {
     const { getByTestId } = render(
       <Field dataTestId="field" label={labelText}>
         <Input />
@@ -159,6 +163,8 @@ describe('<Field />', () => {
     const label = field.querySelector('label')
     const input = field.querySelector('input')
 
+    expect(label.htmlFor.substring(0, 10)).toBe('wui-field-')
+    expect(label.htmlFor).toBe(input.id)
     userEvent.click(label)
     expect(input).toHaveFocus()
     expect(document.activeElement).toBe(input)

diff --git a/packages/Field/index.tsx b/packages/Field/index.tsx
@@ -6,7 +6,7 @@ import { CreateWuiProps, forwardRef } from '@welcome-ui/system'
 // Fields
 import { RowContainer } from './layout'
 import * as S from './styles'
-import { getBaseType, getVariant } from './utils'
+import { generateRandomId, getBaseType, getVariant } from './utils'
 
 export type Size = 'sm' | 'md' | 'lg'
 
@@ -49,7 +49,7 @@ export const Field = forwardRef<'div', FieldProps>(
     const Container = layout === 'row' ? RowContainer : Fragment
     const variant = getVariant({ error, warning })
     const hintText = variant ? error || warning : hint
-    const htmlFor = children.props.id || children.props.name
+    const htmlFor = children.props.id || children.props.name || generateRandomId()
 
     const child = React.cloneElement(React.Children.only(children), {
       disabled,

diff --git a/packages/Field/utils.ts b/packages/Field/utils.ts
@@ -21,3 +21,5 @@ export const getVariant = ({ error, warning }: VariantProps): VariantReturn => {
   if (warning) return 'warning'
   return undefined
 }
+
+export const generateRandomId = (): string => `wui-field-${Math.random().toString(36).slice(2)}`