@@ -560,7 +562,7 @@ describe('', () => {
});
});
- it('should recive a value on change when creating a new choice', async () => {
+ it('should receive a value on change when creating a new choice', async () => {
jest.spyOn(console, 'warn').mockImplementation(() => {});
const choices = [...defaultProps.choices];
const newChoice = { id: 'js_fatigue', name: 'New Kid On The Block' };
@@ -603,7 +605,7 @@ describe('', () => {
});
});
- it('should show selected values when ids type are inconsistant', async () => {
+ it('should show selected values when ids type are inconsistent', async () => {
render();
await waitFor(() => {
expect(screen.queryByText('artist_1')).not.toBeNull();
@@ -667,4 +669,27 @@ describe('', () => {
fireEvent.click(screen.getByLabelText('Add'));
expect(await screen.findAllByText('Foo')).toHaveLength(2);
});
+
+ describe('inside ReferenceArrayInput', () => {
+ it('should use the recordRepresentation as optionText', async () => {
+ render();
+ await screen.findByText('Leo Tolstoy');
+ });
+ it('should not change an undefined value to empty string', async () => {
+ const onSuccess = jest.fn();
+ render(
+
+ );
+ const input = await screen.findByDisplayValue('War and Peace');
+ fireEvent.change(input, { target: { value: 'War' } });
+ screen.getByText('Save').click();
+ await waitFor(() => {
+ expect(onSuccess).toHaveBeenCalledWith(
+ expect.objectContaining({ authors: undefined }),
+ expect.anything(),
+ expect.anything()
+ );
+ });
+ });
+ });
});
diff --git a/packages/ra-ui-materialui/src/input/SelectArrayInput.stories.tsx b/packages/ra-ui-materialui/src/input/SelectArrayInput.stories.tsx
index f4da18092e1..5038ee88297 100644
--- a/packages/ra-ui-materialui/src/input/SelectArrayInput.stories.tsx
+++ b/packages/ra-ui-materialui/src/input/SelectArrayInput.stories.tsx
@@ -9,7 +9,6 @@ import {
TextField,
} from '@mui/material';
import fakeRestProvider from 'ra-data-fakerest';
-import { useWatch } from 'react-hook-form';
import { AdminContext } from '../AdminContext';
import { Create, Edit } from '../detail';
@@ -19,23 +18,14 @@ import { ReferenceArrayInput } from './ReferenceArrayInput';
import { useCreateSuggestionContext } from './useSupportCreateSuggestion';
import { TextInput } from './TextInput';
import { ArrayInput, SimpleFormIterator } from './ArrayInput';
+import { Resource, TestMemoryRouter } from 'ra-core';
+import { Admin } from 'react-admin';
+import { FormInspector } from './common';
export default { title: 'ra-ui-materialui/input/SelectArrayInput' };
const i18nProvider = polyglotI18nProvider(() => englishMessages);
-const FormInspector = ({ source }) => {
- const value = useWatch({ name: source });
- return (
-
- {source} value in form:
-
- {JSON.stringify(value)} ({typeof value})
-
-
- );
-};
-
export const Basic = () => (
(
/>
-
+
@@ -337,3 +327,194 @@ export const TranslateChoice = () => {
);
};
+
+const authors = [
+ { id: 1, first_name: 'Leo', last_name: 'Tolstoy', language: 'Russian' },
+ { id: 2, first_name: 'Victor', last_name: 'Hugo', language: 'French' },
+ {
+ id: 3,
+ first_name: 'William',
+ last_name: 'Shakespeare',
+ language: 'English',
+ },
+ {
+ id: 4,
+ first_name: 'Charles',
+ last_name: 'Baudelaire',
+ language: 'French',
+ },
+ { id: 5, first_name: 'Marcel', last_name: 'Proust', language: 'French' },
+];
+
+const dataProviderWithAuthors = {
+ getOne: () =>
+ Promise.resolve({
+ data: {
+ id: 1,
+ title: 'War and Peace',
+ authors: [1],
+ summary:
+ "War and Peace broadly focuses on Napoleon's invasion of Russia, and the impact it had on Tsarist society. The book explores themes such as revolution, revolution and empire, the growth and decline of various states and the impact it had on their economies, culture, and society.",
+ year: 1869,
+ },
+ }),
+ getMany: (_resource, params) =>
+ Promise.resolve({
+ data: authors.filter(author => params.ids.includes(author.id)),
+ }),
+ getList: () =>
+ new Promise(resolve => {
+ // eslint-disable-next-line eqeqeq
+ setTimeout(
+ () =>
+ resolve({
+ data: authors,
+ total: authors.length,
+ }),
+ 500
+ );
+ return;
+ }),
+ update: (_resource, params) => Promise.resolve(params),
+ create: (_resource, params) => {
+ const newAuthor = {
+ id: authors.length + 1,
+ first_name: params.data.first_name,
+ last_name: params.data.last_name,
+ language: params.data.language,
+ };
+ authors.push(newAuthor);
+ return Promise.resolve({ data: newAuthor });
+ },
+} as any;
+
+export const InsideReferenceArrayInput = () => (
+