Merge pull request marmelab#11101 from AarishMansur/fix/simpleformiterator-disable-autofocus

Allow disabling auto focusing the first input of newly added row with `<SimpleFormIterator disableAutoFocus>`

Author: slax57

docs/SimpleFormIterator.md

@@ -77,17 +77,19 @@ const OrderEdit = () => (
 | `children` | Optional | `ReactElement` | - | List of inputs to display for each row |
 | `className` | Optional | `string` | - | Applied to the root element (`<ul>`) |
 | `disableAdd` | Optional | `boolean` | `false` | When true, the user cannot add new rows |
+| `disableAutoFocus` | Optional | `boolean` | `false` | Prevent focusing the first input when adding a new row |
 | `disableClear` | Optional | `boolean` | `false` | When true, the user cannot clear the array |
+| `disabled` | Optional | `boolean` | `false` | If true, all buttons are disabled. |
 | `disableRemove` | Optional | `boolean` | `false` | When true, the user cannot remove rows |
 | `disableReordering` | Optional | `boolean` | `false` | When true, the user cannot reorder rows |
 | `fullWidth` | Optional | `boolean` | `true` | Set to false to glue the actions to last input |
 | `getItemLabel` | Optional | `function` | `x => x` | Callback to render the label displayed in each row |
 | `inline` | Optional | `boolean` | `false` | When true, inputs are put on the same line |
 | `removeButton` | Optional | `ReactElement` | - | Component to render for the remove button |
 | `reOrderButtons` | Optional | `ReactElement` | - | Component to render for the up / down button |
-| `disabled` | Optional | `boolean` | `false` | If true, all buttons are disabled. |
 | `sx` | Optional | `SxProps` | - | Material UI shortcut for defining custom styles |
 
+
 ## `addButton`
 
 This prop lets you pass a custom element to replace the default Add button. 
@@ -211,6 +213,23 @@ When true, the Add button isn't rendered, so users cannot add new rows.
 </SimpleFormIterator>
 ```
 
+## `disableAutoFocus`
+
+By default, `<SimpleFormIterator>` focuses the first input of a newly added row.
+This behavior comes from `react-hook-form`'s [`useFieldArray`](https://react-hook-form.com/docs/usefieldarray) `append()` method.
+
+You can disable this behavior by setting the `disableAutoFocus` prop.
+
+```jsx
+<ArrayInput source="items">
+    <SimpleFormIterator disableAutoFocus>
+        <TextInput source="name" />
+        <NumberInput source="price" />
+        <NumberInput source="quantity" />
+    </SimpleFormIterator>
+</ArrayInput> 
+```
+
 ## `disableClear`
 
 When true, the array clear button isn't rendered, so the user cannot clear the array.
@@ -223,6 +242,19 @@ When true, the array clear button isn't rendered, so the user cannot clear the a
 </SimpleFormIterator>
 ```
 
+## `disabled`
+
+The `disabled` prop set to true makes the children input not mutable, focusable, or even submitted with the form.
+
+```jsx
+<SimpleFormIterator disabled>
+    <TextInput source="name" />
+    <NumberInput source="price" />
+    <NumberInput source="quantity" />
+</SimpleFormIterator>
+```
+
+Contrary to read-only controls, disabled controls can not receive focus and are not submitted with the form.
 
 ## `disableRemove`
 
@@ -401,20 +433,6 @@ The `readOnly` prop set to true makes the children input not mutable, meaning th
 
 Contrary to disabled controls, read-only controls are still focusable and are submitted with the form.
 
-## `disabled`
-
-The `disabled` prop set to true makes the children input not mutable, focusable, or even submitted with the form.
-
-```jsx
-<SimpleFormIterator disabled>
-    <TextInput source="name" />
-    <NumberInput source="price" />
-    <NumberInput source="quantity" />
-</SimpleFormIterator>
-```
-
-Contrary to read-only controls, disabled controls can not receive focus and are not submitted with the form.
-
 ## `sx`
 
 You can override the style of the root element (a `<div>` element) as well as those of the inner components thanks to the `sx` property (see [the `sx` documentation](./SX.md) for syntax and examples).

docs_headless/src/content/docs/SimpleFormIteratorBase.md

@@ -65,6 +65,11 @@ const AddItemButton = () => {
 
 ## Props
 
-| Prop              | Required | Type           | Default               | Description                                   |
-|-------------------|----------|----------------|-----------------------|-----------------------------------------------|
-| `children`        | Optional | `ReactNode` | -                     | List of inputs to display for each array item |
+| Prop               | Required | Type        | Default | Description                                             |
+| ------------------ | -------- | ----------- | ------- | ------------------------------------------------------- |
+| `children`         | Optional | `ReactNode` | -       | List of inputs to display for each array item           |
+| `disableAutoFocus` | Optional | `boolean`   | `false` | Prevent focusing the first input when adding a new item |
+
+## `disableAutoFocus`
+
+When true, will pass `{ shouldFocus: false }` to `react-hook-form`'s [`useFieldArray`](https://react-hook-form.com/docs/usefieldarray) `append()` method when adding a new item, preventing the first input of the newly added item from being focused automatically.

packages/ra-core/src/controller/input/SimpleFormIteratorBase.stories.tsx

@@ -75,7 +75,7 @@ const AddItemButton = () => {
     );
 };
 
-export const Basic = () => (
+export const Basic = (props: Partial<SimpleFormIteratorBaseProps>) => (
     <TestMemoryRouter initialEntries={['/posts/1']}>
         <Admin
             dataProvider={fakeRestDataProvider({
@@ -118,7 +118,7 @@ export const Basic = () => (
                             <div>
                                 <div>Tags:</div>
                                 <ArrayInputBase source="tags">
-                                    <SimpleFormIterator>
+                                    <SimpleFormIterator {...props}>
                                         <TextInput source="name" />
                                         <TextInput source="color" />
                                     </SimpleFormIterator>
@@ -131,3 +131,9 @@ export const Basic = () => (
         </Admin>
     </TestMemoryRouter>
 );
+Basic.args = {
+    disableAutoFocus: false,
+};
+Basic.argTypes = {
+    disableAutoFocus: { control: 'boolean' },
+};

packages/ra-core/src/controller/input/SimpleFormIteratorBase.tsx

@@ -13,6 +13,7 @@ export const SimpleFormIteratorBase = (props: SimpleFormIteratorBaseProps) => {
     const {
         children,
         getItemDefaults: getItemDefaultsProp = DefaultGetItemDefaults,
+        disableAutoFocus = false,
     } = props;
     const getItemDefaults = useEvent(getItemDefaultsProp);
 
@@ -39,7 +40,7 @@ export const SimpleFormIteratorBase = (props: SimpleFormIteratorBaseProps) => {
     });
 
     const addField = useEvent((item: any = undefined) => {
-        append(getItemDefaults(item));
+        append(getItemDefaults(item), { shouldFocus: !disableAutoFocus });
     });
 
     const handleReorder = useEvent((origin: number, destination: number) => {
@@ -92,4 +93,5 @@ export interface SimpleFormIteratorBaseProps
     record?: RaRecord;
     resource?: string;
     source?: string;
+    disableAutoFocus?: boolean;
 }

packages/ra-ui-materialui/src/input/ArrayInput/SimpleFormIterator.stories.tsx

@@ -328,3 +328,12 @@ export const Large = () => (
         </Edit>
     </AdminContext>
 );
+
+export const DisableAutoFocus = () => (
+    <Wrapper>
+        <SimpleFormIterator disableAutoFocus>
+            <TextInput source="name" />
+            <TextInput source="role" />
+        </SimpleFormIterator>
+    </Wrapper>
+);