Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 0 additions & 13 deletions docs/AutocompleteArrayInput.md
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,6 @@ The form value for the source must be an array of the selected values, e.g.
| `createLabel` | Optional | `string` | `ReactNode` | - | The label used as hint to let users know they can create a new choice. Displayed when the filter is empty. |
| `createItemLabel` | Optional | `string` | `(filter: string) => ReactNode` | `ra.action .create_item` | The label for the menu item allowing users to create a new choice. Used when the filter is not empty. |
| `debounce` | Optional | `number` | `250` | The delay to wait before calling the setFilter function injected when used in a ReferenceArray Input. |
| `emptyValue` | Optional | `any` | `''` | The value to use for the empty element |
| `filterToQuery` | Optional | `string` => `Object` | `q => ({ q })` | How to transform the searchText into a parameter for the data provider |
| `inputText` | Optional | `Function` | `-` | Required if `optionText` is a custom Component, this function must return the text displayed for the current selection. |
| `matchSuggestion` | Optional | `Function` | `-` | Required if `optionText` is a React element. Function returning a boolean indicating whether a choice matches the filter. `(filter, choice) => boolean` |
Expand Down Expand Up @@ -298,18 +297,6 @@ This delay can be customized by setting the `debounce` prop.
</ReferenceArrayInput>
```

## `emptyValue`

If the input isn't required (using `validate={required()}`), users can select an empty choice. The default value for that empty choice is the empty string (`''`), or `null` if the input is inside a [`<ReferenceArrayInput>`](./ReferenceArrayInput.md).

You can override this value with the `emptyValue` prop.

```jsx
<AutocompleteArrayInput source="roles" choices={choices} emptyValue={0} />
```

**Tip**: While you can set `emptyValue` to a non-string value (e.g. `0`), you cannot use `null` or `undefined`, as it would turn the `<AutocompleteArrayInput>` into an [uncontrolled component](https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components). If you need the empty choice to be stored as `null` or `undefined`, use [the `parse` prop](./Inputs.md#parse) to convert the default empty value (`''`) to `null` or `undefined`, or use [the `sanitizeEmptyValues` prop](./SimpleForm.md#sanitizeemptyvalues) on the Form component.

## `filterToQuery`

When used inside a [`<ReferenceArrayInput>`](./ReferenceArrayInput.md), whenever users type a string in the autocomplete input, `<AutocompleteArrayInput>` calls `dataProvider.getList()` using the string as filter, to return a filtered list of possible options from the reference resource. This filter is built using the `filterToQuery` prop.
Expand Down
33 changes: 33 additions & 0 deletions packages/ra-ui-materialui/src/input/AutocompleteInput.spec.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -260,6 +260,39 @@ describe('<AutocompleteInput />', () => {
expect(screen.queryByText('Default')).toBeNull();
await screen.findByText('No options');
});

it('should not display the emptyText when multiple is true', async () => {
const mock = jest
.spyOn(console, 'warn')
.mockImplementation(() => {});
render(
<AdminContext dataProvider={testDataProvider()}>
<ResourceContextProvider value="posts">
<SimpleForm onSubmit={jest.fn()}>
<AutocompleteInput
emptyText="Default"
{...defaultProps}
choices={[{ id: 2, name: 'foo' }]}
multiple
/>
</SimpleForm>
</ResourceContextProvider>
</AdminContext>
);
fireEvent.click(
await screen.findByLabelText('resources.users.fields.role')
);
await waitFor(() => {
expect(screen.queryAllByRole('option').length).toEqual(1);
});
expect(screen.queryByText('Default')).toBeNull();
expect(mock).toHaveBeenCalledWith(
expect.stringContaining(
'emptyText and emptyValue are not supported when multiple is true'
)
);
mock.mockRestore();
});
});

describe('optionValue', () => {
Expand Down
9 changes: 9 additions & 0 deletions packages/ra-ui-materialui/src/input/AutocompleteInput.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -314,6 +314,15 @@ If you provided a React element for the optionText prop, you must also provide t
}
}, [optionText, inputText, matchSuggestion, emptyText, isFromReference]);

useEffect(() => {
warning(
multiple &&
(props.emptyText !== undefined ||
props.emptyValue !== undefined),
`emptyText and emptyValue are not supported when multiple is true (e.g. in <AutocompleteArrayInput>): the empty value of a multi-valued input is an empty array, so it needs no empty choice. These props are ignored.`
);
}, [multiple, props.emptyText, props.emptyValue]);

useEffect(() => {
warning(
/* eslint-disable eqeqeq */
Expand Down
Loading