fix: add skipped test to handle no id no name field child

Signed-off-by: Paul-Xavier Ceccaldi <pix@wttj.co>

docs/pages/components/field.mdx

@@ -23,8 +23,8 @@ You can find props for each field component in the other `Forms` pages.
 ## Classic
 
 ```jsx
-<Field label="I'm a small sized field" size="sm">
-  <InputText name="small-sized-field" />
+<Field label="I'm a small sized field">
+  <InputText name="small-sized-field" size="sm" />
 </Field>
 <Field label="I'm a disabled field" disabled>
   <InputText name="disabled-field" placeholder="placeholder" />
@@ -194,7 +194,7 @@ return (
       <Box mt="xl" mb="sm">
         Click a button below to focus the relevant field above
       </Box>
-      <Button onClick={handleNormalClick} ml={20}>
+      <Button onClick={handleNormalClick}>
         Normal field
       </Button>
       <Button onClick={handleNakedClick} ml={20}>

packages/Field/index.test.tsx

@@ -147,4 +147,20 @@ describe('<Field />', () => {
     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 () => {
+    const { getByTestId } = render(
+      <Field dataTestId="field" label={labelText}>
+        <Input />
+      </Field>
+    )
+
+    const field = getByTestId('field')
+    const label = field.querySelector('label')
+    const input = field.querySelector('input')
+
+    userEvent.click(label)
+    expect(input).toHaveFocus()
+    expect(document.activeElement).toBe(input)
+  })
 })

packages/FileUpload/index.js

@@ -1,4 +1,4 @@
-import React, { forwardRef, useEffect, useRef, useState } from 'react'
+import React, { forwardRef, useEffect, useState } from 'react'
 import { bool, func, node, number, object, oneOfType, string } from 'prop-types'
 import { Button } from '@welcome-ui/button'
 import { createEvent } from '@welcome-ui/utils'
@@ -43,8 +43,7 @@ export const FileUpload = forwardRef(
   ) => {
     // We always keep an array of files
     const [files, setFiles] = useState(ensureArray(value))
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const inputRef = ref || useRef()
+    const inputRef = ref || React.createRef()
 
     // Ensure component is controlled
     useEffect(() => {