Add a default unique id for useInput

cypress/support/CreatePage.js

@@ -23,7 +23,7 @@ export default url => ({
         title: '#react-admin-title',
         userMenu: 'button[aria-label="Profile"]',
         logout: '.logout',
-        nameError: '#name-helper-text',
+        nameError: '#use-input-name-helper-text',
     },
 
     navigate() {

docs/useInput.md

@@ -41,16 +41,16 @@ const TitleInput = ({ source, label }) => {
 
 ## Props
 
-| Prop           | Required | Type                           | Default | Description                                                       |
-|----------------|----------|--------------------------------|---------|-------------------------------------------------------------------|
-| `source`       | Required | `string`                       | -       | The name of the field in the record                               |
-| `defaultValue` | Optional | `any`                          | -       | The default value of the input                                    |
-| `format`       | Optional | `Function`                     | -       | A function to format the value from the record to the input value |
-| `parse`        | Optional | `Function`                     | -       | A function to parse the value from the input to the record value  |
-| `validate`     | Optional | `Function` | `Function[]` | -       | A function or an array of functions to validate the input value   |
-| `id`           | Optional | `string`                       | -       | The id of the input                                               |
-| `onChange`     | Optional | `Function`                     | -       | A function to call when the input value changes                   |
-| `onBlur`       | Optional | `Function`                     | -       | A function to call when the input is blurred                      |
+| Prop           | Required | Type                           | Default              | Description                                                       |
+|----------------|----------|--------------------------------|--------------------- |-------------------------------------------------------------------|
+| `source`       | Required | `string`                       | -                    | The name of the field in the record                               |
+| `defaultValue` | Optional | `any`                          | -                    | The default value of the input                                    |
+| `format`       | Optional | `Function`                     | -                    | A function to format the value from the record to the input value |
+| `parse`        | Optional | `Function`                     | -                    | A function to parse the value from the input to the record value  |
+| `validate`     | Optional | `Function` | `Function[]` | -                    | A function or an array of functions to validate the input value   |
+| `id`           | Optional | `string`                       | `use-input-[source]` | The id of the input                                               |
+| `onChange`     | Optional | `Function`                     | -                    | A function to call when the input value changes                   |
+| `onBlur`       | Optional | `Function`                     | -                    | A function to call when the input is blurred                      |
 
 Additional props are passed to [react-hook-form's `useController` hook](https://react-hook-form.com/docs/usecontroller).
 

packages/ra-core/src/form/useInput.spec.tsx

@@ -58,7 +58,7 @@ describe('useInput', () => {
             </CoreAdminContext>
         );
 
-        expect(inputProps.id).toEqual('title');
+        expect(inputProps.id).toEqual('use-input-title');
         expect(inputProps.isRequired).toEqual(true);
         expect(inputProps.field).toBeDefined();
         expect(inputProps.field.name).toEqual('title');

packages/ra-core/src/form/useInput.stories.tsx

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import { CoreAdminContext } from '../core';
+import { Form } from './Form';
+import { useInput } from './useInput';
+
+export default {
+    title: 'ra-core/form/useInput',
+};
+
+const Input = ({ source }) => {
+    const { id, field, fieldState } = useInput({ source });
+
+    return (
+        <label htmlFor={id}>
+            {id}: <input id={id} {...field} />
+            {fieldState.error && <span>{fieldState.error.message}</span>}
+        </label>
+    );
+};
+
+export const Basic = () => {
+    const [submittedData, setSubmittedData] = React.useState<any>();
+    return (
+        <CoreAdminContext>
+            <Form onSubmit={data => setSubmittedData(data)}>
+                <div
+                    style={{
+                        display: 'flex',
+                        flexDirection: 'column',
+                        gap: '1em',
+                        marginBottom: '1em',
+                    }}
+                >
+                    <Input source="field1" />
+                    <Input source="field2" />
+                    <Input source="field3" />
+                </div>
+                <button type="submit">Submit</button>
+            </Form>
+            <pre>{JSON.stringify(submittedData, null, 2)}</pre>
+        </CoreAdminContext>
+    );
+};

packages/ra-core/src/form/useInput.ts

@@ -132,7 +132,7 @@ export const useInput = <ValueType = any>(
     };
 
     return {
-        id: id || finalSource,
+        id: id || `use-input-${finalSource}`,
         field,
         fieldState,
         formState,

packages/ra-input-rich-text/src/RichTextInput.spec.tsx

@@ -9,18 +9,18 @@ describe('<RichTextInput />', () => {
         const { container, rerender } = render(<Basic record={record} />);
 
         await waitFor(() => {
-            expect(container.querySelector('#body')?.innerHTML).toEqual(
-                '<h1>Hello world!</h1>'
-            );
+            expect(
+                container.querySelector('#use-input-body')?.innerHTML
+            ).toEqual('<h1>Hello world!</h1>');
         });
 
         const newRecord = { id: 123, body: '<h1>Goodbye world!</h1>' };
         rerender(<Basic record={newRecord} />);
 
         await waitFor(() => {
-            expect(container.querySelector('#body')?.innerHTML).toEqual(
-                '<h1>Goodbye world!</h1>'
-            );
+            expect(
+                container.querySelector('#use-input-body')?.innerHTML
+            ).toEqual('<h1>Goodbye world!</h1>');
         });
     });
 });

packages/ra-ui-materialui/src/input/RadioButtonGroupInput.spec.tsx

@@ -86,9 +86,9 @@ describe('<RadioButtonGroupInput />', () => {
         );
         expect(screen.queryByText('People')).not.toBeNull();
         const input1 = screen.getByLabelText('Leo Tolstoi');
-        expect(input1.id).toBe('type_123');
+        expect(input1.id).toBe('use-input-type_123');
         const input2 = screen.getByLabelText('Jane Austen');
-        expect(input2.id).toBe('type_456');
+        expect(input2.id).toBe('use-input-type_456');
     });
 
     it('should trigger custom onChange when clicking radio button', async () => {