diff --git a/packages/ra-ui-materialui/src/form/SimpleFormIterator.spec.tsx b/packages/ra-ui-materialui/src/form/SimpleFormIterator.spec.tsx
index 40c1033b855..d0b4be4ff39 100644
--- a/packages/ra-ui-materialui/src/form/SimpleFormIterator.spec.tsx
+++ b/packages/ra-ui-materialui/src/form/SimpleFormIterator.spec.tsx
@@ -1,5 +1,6 @@
import { cleanup, fireEvent, wait, getByText } from '@testing-library/react';
import * as React from 'react';
+import expect from 'expect';
import {
renderWithRedux,
SaveContextProvider,
@@ -29,6 +30,68 @@ describe('', () => {
const saveContextValue = { save: jest.fn(), saving: false };
const sideEffectValue = {};
+ it('should display one input group per row', () => {
+ const { queryAllByLabelText } = renderWithRedux(
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+ const inputElements = queryAllByLabelText(
+ 'resources.undefined.fields.email'
+ );
+ expect(inputElements).toHaveLength(2);
+ expect((inputElements[0] as HTMLInputElement).disabled).toBeFalsy();
+ expect((inputElements[0] as HTMLInputElement).value).toBe('foo');
+ expect((inputElements[1] as HTMLInputElement).disabled).toBeFalsy();
+ expect((inputElements[1] as HTMLInputElement).value).toBe('bar');
+ });
+
+ it('should render disabled inputs when disabled is true', () => {
+ const { queryAllByLabelText } = renderWithRedux(
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+ const inputElements = queryAllByLabelText(
+ 'resources.undefined.fields.email'
+ );
+ expect(inputElements).toHaveLength(2);
+ expect((inputElements[0] as HTMLInputElement).disabled).toBeTruthy();
+ expect((inputElements[0] as HTMLInputElement).value).toBe('foo');
+ expect((inputElements[1] as HTMLInputElement).disabled).toBeTruthy();
+ expect((inputElements[1] as HTMLInputElement).value).toBe('bar');
+ });
+
it('should display an add item button at least', () => {
const { getByText } = renderWithRedux(
@@ -65,6 +128,24 @@ describe('', () => {
expect(queryAllByText('ra.action.add').length).toBe(0);
});
+ it('should not display add button if disabled is truthy', () => {
+ const { queryAllByText } = renderWithRedux(
+
+
+
+
+
+
+
+
+
+
+
+ );
+
+ expect(queryAllByText('ra.action.add').length).toBe(0);
+ });
+
it('should not display remove button if disableRemove is truthy', () => {
const { queryAllByText } = renderWithRedux(
@@ -90,6 +171,31 @@ describe('', () => {
expect(queryAllByText('ra.action.remove').length).toBe(0);
});
+ it('should not display remove button if disabled is truthy', () => {
+ const { queryAllByText } = renderWithRedux(
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+
+ expect(queryAllByText('ra.action.remove').length).toBe(0);
+ });
+
it('should add children row on add button click', async () => {
const {
getByText,
diff --git a/packages/ra-ui-materialui/src/form/SimpleFormIterator.tsx b/packages/ra-ui-materialui/src/form/SimpleFormIterator.tsx
index dd77aa1d183..ce6991e27e2 100644
--- a/packages/ra-ui-materialui/src/form/SimpleFormIterator.tsx
+++ b/packages/ra-ui-materialui/src/form/SimpleFormIterator.tsx
@@ -105,6 +105,7 @@ const SimpleFormIterator: FC = props => {
record,
resource,
source,
+ disabled,
disableAdd,
disableRemove,
variant,
@@ -220,6 +221,7 @@ const SimpleFormIterator: FC = props => {
? `resources.${resource}.fields.${input.props.source}`
: undefined
: input.props.label,
+ disabled,
})}
record={
(records &&
@@ -233,28 +235,29 @@ const SimpleFormIterator: FC = props => {
) : null
)}
- {!disableRemoveField(
- (records && records[index]) || {},
- disableRemove
- ) && (
-
- {cloneElement(removeButton, {
- onClick: handleRemoveButtonClick(
- removeButton.props.onClick,
- index
- ),
- className: classNames(
- 'button-remove',
- `button-remove-${source}-${index}`
- ),
- })}
-
- )}
+ {!disabled &&
+ !disableRemoveField(
+ (records && records[index]) || {},
+ disableRemove
+ ) && (
+
+ {cloneElement(removeButton, {
+ onClick: handleRemoveButtonClick(
+ removeButton.props.onClick,
+ index
+ ),
+ className: classNames(
+ 'button-remove',
+ `button-remove-${source}-${index}`
+ ),
+ })}
+
+ )}
))}
- {!disableAdd && (
+ {!disabled && !disableAdd && (
{cloneElement(addButton, {
@@ -307,6 +310,7 @@ export interface SimpleFormIteratorProps
basePath?: string;
className?: string;
defaultValue?: any;
+ disabled?: boolean;
disableAdd?: boolean;
disableRemove?: boolean | DisableRemoveFunction;
margin?: 'none' | 'normal' | 'dense';
diff --git a/packages/ra-ui-materialui/src/input/ArrayInput.tsx b/packages/ra-ui-materialui/src/input/ArrayInput.tsx
index 40bab19a934..1fc1fdcdc95 100644
--- a/packages/ra-ui-materialui/src/input/ArrayInput.tsx
+++ b/packages/ra-ui-materialui/src/input/ArrayInput.tsx
@@ -58,6 +58,7 @@ const ArrayInput: FC = ({
source,
validate,
variant,
+ disabled,
margin = 'dense',
...rest
}) => {
@@ -93,6 +94,7 @@ const ArrayInput: FC = ({
source,
variant,
margin,
+ disabled,
})}
);
@@ -122,5 +124,6 @@ ArrayInput.defaultProps = {
export interface ArrayInputProps extends InputProps {
children: ReactElement;
+ disabled?: boolean;
}
export default ArrayInput;