Skip to content

Add offline support to <ReferenceInputBase>, <ReferenceInput> and <AutocompleteInput> #10864

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Madeorsk merged 6 commits into from
Aug 26, 2025
Merged

Add offline support to <ReferenceInputBase>, <ReferenceInput> and <AutocompleteInput> #10864

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
d26a330
Add offline support to `<ReferenceInputBase>`, `<ReferenceInput>` and…
djhi Jul 29, 2025
cd434a1
Merge branch 'next' into offline-support-reference-input
djhi Aug 25, 2025
cd81594
Apply review suggestions
djhi Aug 25, 2025
72c665b
Update AutocompleteArrayInput documentation
djhi Aug 25, 2025
bc02cc4
Correctly handle offline case in ReferenceInputBase
djhi Aug 26, 2025
db34cb8
Apply suggestions from code review
djhi Aug 26, 2025
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
22 changes: 22 additions & 0 deletions docs/AutocompleteArrayInput.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,7 @@ The form value for the source must be an array of the selected values, e.g.
| `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` |
| `offline` | Optional | `ReactNode` | - | What to render when there is no network connectivity when fetching the choices |
| `onChange` | Optional | `Function` | `-` | A function called with the new value, along with the selected records, when the input value changes |
| `onCreate` | Optional | `Function` | `-` | A function called with the current filter value when users choose to create a new choice. |
| `optionText` | Optional | `string` &#124; `Function` &#124; `Component` | `name` | Field name of record to display in the suggestion item or function which accepts the correct record as argument (`(record)=> {string}`) |
Expand Down Expand Up @@ -323,6 +324,27 @@ const filterToQuery = searchText => ({ name_ilike: `%${searchText}%` });
</ReferenceArrayInput>
```

## `offline`

`<AutocompleteArrayInput>` can display a custom message when it can't fetch the choices because there is no network connectivity, thanks to the `offline` prop.

```jsx
<ReferenceArrayInput source="tag_ids" reference="tags">
<AutocompleteArrayInput offline={<span>No network, could not fetch data</span>} />
</ReferenceArrayInput>
```

You can pass either a React element or a string to the `offline` prop:

```jsx
<ReferenceArrayInput source="tag_ids" reference="tags">
<AutocompleteArrayInput offline={<span>No network, could not fetch data</span>} />
</ReferenceArrayInput>
<ReferenceArrayInput source="tag_ids" reference="tags">
<AutocompleteArrayInput offline="No network, could not fetch data" />
</ReferenceArrayInput>
```

## `onChange`

Use the `onChange` prop to get notified when the input value changes.
Expand Down
62 changes: 42 additions & 20 deletions docs/AutocompleteInput.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,27 +54,28 @@ The form value for the source must be the selected value, e.g.

## Props

| Prop | Required | Type | Default | Description |
|--------------------------- |----------|-------------------------------------------------|-------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| `choices` | Optional | `Object[]` | `-` | List of items to autosuggest. Required if not inside a ReferenceInput. |
| `create` | Optional | `Element` | `-` | A React Element to render when users want to create a new choice |
| `createLabel` | Optional | `string` &#124; `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` &#124; `(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 ReferenceInput. |
| `emptyText` | Optional | `string` | `''` | The text to use for the empty element |
| `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 |
| `isPending` | Optional | `boolean` | `false` | If `true`, the component will display a loading indicator. |
| `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` |
| `onChange` | Optional | `Function` | `-` | A function called with the new value, along with the selected record, when the input value changes |
| `onCreate` | Optional | `Function` | `-` | A function called with the current filter value when users choose to create a new choice. |
| Prop | Required | Type | Default | Description |
|--------------------------- |----------|-------------------------------------------------|--------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| `choices` | Optional | `Object[]` | `-` | List of items to autosuggest. Required if not inside a ReferenceInput. |
| `create` | Optional | `Element` | `-` | A React Element to render when users want to create a new choice |
| `createLabel` | Optional | `string` &#124; `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` &#124; `(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 ReferenceInput. |
| `emptyText` | Optional | `string` | `''` | The text to use for the empty element |
| `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 |
| `isPending` | Optional | `boolean` | `false` | If `true`, the component will display a loading indicator. |
| `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` |
| `offline` | Optional | `ReactNode` | - | What to render when there is no network connectivity when fetching the choices |
| `onChange` | Optional | `Function` | `-` | A function called with the new value, along with the selected record, when the input value changes |
| `onCreate` | Optional | `Function` | `-` | A function called with the current filter value when users choose to create a new choice. |
| `optionText` | Optional | `string` &#124; `Function` &#124; `Component` | `undefined` &#124; `record Representation` | Field name of record to display in the suggestion item or function using the choice object as argument |
| `optionValue` | Optional | `string` | `id` | Field name of record containing the value to use as input value |
| `setFilter` | Optional | `Function` | `null` | A callback to inform the `searchText` has changed and new `choices` can be retrieved based on this `searchText`. Signature `searchText => void`. This function is automatically set up when using `ReferenceInput`. |
| `shouldRender Suggestions` | Optional | `Function` | `() => true` | A function that returns a `boolean` to determine whether or not suggestions are rendered. |
| `suggestionLimit` | Optional | `number` | `null` | Limits the numbers of suggestions that are shown in the dropdown list |
| `translateChoice` | Optional | `boolean` | `true` | Whether the choices should be translated |
| `optionValue` | Optional | `string` | `id` | Field name of record containing the value to use as input value |
| `setFilter` | Optional | `Function` | `null` | A callback to inform the `searchText` has changed and new `choices` can be retrieved based on this `searchText`. Signature `searchText => void`. This function is automatically set up when using `ReferenceInput`. |
| `shouldRender Suggestions` | Optional | `Function` | `() => true` | A function that returns a `boolean` to determine whether or not suggestions are rendered. |
| `suggestionLimit` | Optional | `number` | `null` | Limits the numbers of suggestions that are shown in the dropdown list |
| `translateChoice` | Optional | `boolean` | `true` | Whether the choices should be translated |

`<AutocompleteInput>` also accepts the [common input props](./Inputs.md#common-input-props).

Expand Down Expand Up @@ -370,6 +371,27 @@ const UserCountry = () => {
}
```

## `offline`
Comment thread
Madeorsk marked this conversation as resolved.

`<AutocompleteInput>` can display a custom message when it can't fetch the choices because there is no network connectivity, thanks to the `offline` prop.

```jsx
<ReferenceInput source="user_id" reference="users">
<AutocompleteInput offline={<span>No network, could not fetch data</span>} />
</ReferenceInput>
```

You can pass either a React element or a string to the `offline` prop:

```jsx
<ReferenceInput source="user_id" reference="users">
<AutocompleteInput offline={<span>No network, could not fetch data</span>} />
</ReferenceInput>
<ReferenceInput source="user_id" reference="users">
<AutocompleteInput offline="No network, could not fetch data" />
</ReferenceInput>
```

## `onChange`

Use the `onChange` prop to get notified when the input value changes.
Expand Down
Loading
Loading