marmelab/react-admin · error · Error

If you provided a React element for the optionText prop, yo

Error message

If you provided a React element for the optionText prop, you must also provide the matchSuggestion prop (used to match the user input with a choice)

What it means

A React element optionText also needs a way to match user-typed text against choices; the default matching relies on reading a string from the choice. When optionText is a React element and AutocompleteInput is used standalone (not from a ReferenceInput), matchSuggestion must be provided or the component throws.

Source

Thrown at packages/ra-ui-materialui/src/input/AutocompleteInput.tsx:312

    useEffect(() => {
        // eslint-disable-next-line eqeqeq
        if (isValidElement(optionText) && emptyText != undefined) {
            throw new Error(
                `optionText of type React element is not supported when setting emptyText`
            );
        }
        // eslint-disable-next-line eqeqeq
        if (isValidElement(optionText) && inputText == undefined) {
            throw new Error(`
If you provided a React element for the optionText prop, you must also provide the inputText prop (used for the text input)`);
        }
        if (
            isValidElement(optionText) &&
            !isFromReference &&
            // eslint-disable-next-line eqeqeq
            matchSuggestion == undefined
        ) {
            throw new Error(`
If you provided a React element for the optionText prop, you must also provide the matchSuggestion prop (used to match the user input with a choice)`);
        }
    }, [optionText, inputText, matchSuggestion, emptyText, isFromReference]);

    useEffect(() => {
        warning(
            /* eslint-disable eqeqeq */
            shouldRenderSuggestions != undefined && noOptionsText == undefined,
            `When providing a shouldRenderSuggestions function, we recommend you also provide the noOptionsText prop and set it to a text explaining users why no options are displayed. It supports translation keys.`
        );
        /* eslint-enable eqeqeq */
    }, [shouldRenderSuggestions, noOptionsText]);

    const getRecordRepresentation = useGetRecordRepresentation(resource);

    const { getChoiceText, getChoiceValue, getSuggestions } = useSuggestions({
        choices: finalChoices,
        limitChoicesToValue,

View on GitHub (pinned to 051f511bb0)

Solutions

1. Provide matchSuggestion, e.g. matchSuggestion={filter => choice => choice.name.includes(filter)}
2. Wrap the input in a ReferenceInput so matching is handled by the reference data provider
3. Switch optionText to a string or function so default matching applies

Example fix

// before
<AutocompleteInput source="tags" choices={tags} optionText={<TagOption />} inputText={t => t.label} />
// after
<AutocompleteInput source="tags" choices={tags} optionText={<TagOption />} inputText={t => t.label} matchSuggestion={filter => choice => choice.label.includes(filter)} />

import { isValidElement } from 'react';
if (isValidElement(optionText) && !isInsideReferenceInput && matchSuggestion === undefined) {
  throw new Error('element optionText on standalone AutocompleteInput requires matchSuggestion');
}

const hasMatchSuggestion = (
  p: AutocompleteInputProps
): p is AutocompleteInputProps & { matchSuggestion: NonNullable<AutocompleteInputProps['matchSuggestion']> } =>
  p.matchSuggestion !== undefined;

try {
  render(<AutocompleteInput optionText={<Option />} inputText={t => t.name} />);
} catch (e) {
  console.error('Missing matchSuggestion:', e.message);
  render(<AutocompleteInput optionText="name" />);
}

When it happens

Trigger: Standalone AutocompleteInput (no ReferenceInput wrapper, so isFromReference is false) with optionText as a JSX element and no matchSuggestion prop.

Common situations: Developers add custom option rendering on a bare AutocompleteInput and pass inputText (fixing error 161) but forget the companion matchSuggestion used for filtering suggestions.

Related errors

• optionText of type React element is not supported when setti
• If you provided a React element for the optionText prop, yo
• <ReferenceArrayFieldBase> requires either a 'render' prop or
• <ReferenceFieldBase> requires either a 'render' prop or 'chi
• <ReferenceManyFieldBase> requires either a 'render' prop or

AI-assisted analysis of marmelab/react-admin@051f511bb0 (2026-08-30). Data as JSON: /api/errors/0891179f341c6728. Report an issue: GitHub.