{"record":{"id":"0891179f341c6728","repo":"marmelab/react-admin","slug":"if-you-provided-a-react-element-for-the-optiontex-089117","errorCode":null,"errorMessage":"\nIf 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)","messagePattern":"\nIf 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\\)","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/ra-ui-materialui/src/input/AutocompleteInput.tsx","lineNumber":312,"sourceCode":"    useEffect(() => {\n        // eslint-disable-next-line eqeqeq\n        if (isValidElement(optionText) && emptyText != undefined) {\n            throw new Error(\n                `optionText of type React element is not supported when setting emptyText`\n            );\n        }\n        // eslint-disable-next-line eqeqeq\n        if (isValidElement(optionText) && inputText == undefined) {\n            throw new Error(`\nIf you provided a React element for the optionText prop, you must also provide the inputText prop (used for the text input)`);\n        }\n        if (\n            isValidElement(optionText) &&\n            !isFromReference &&\n            // eslint-disable-next-line eqeqeq\n            matchSuggestion == undefined\n        ) {\n            throw new Error(`\nIf 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)`);\n        }\n    }, [optionText, inputText, matchSuggestion, emptyText, isFromReference]);\n\n    useEffect(() => {\n        warning(\n            /* eslint-disable eqeqeq */\n            shouldRenderSuggestions != undefined && noOptionsText == undefined,\n            `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.`\n        );\n        /* eslint-enable eqeqeq */\n    }, [shouldRenderSuggestions, noOptionsText]);\n\n    const getRecordRepresentation = useGetRecordRepresentation(resource);\n\n    const { getChoiceText, getChoiceValue, getSuggestions } = useSuggestions({\n        choices: finalChoices,\n        limitChoicesToValue,","sourceCodeStart":294,"sourceCodeEnd":330,"githubUrl":"https://github.com/marmelab/react-admin/blob/051f511bb0afb5ea565c2d3728bf4dab0a6fa5e0/packages/ra-ui-materialui/src/input/AutocompleteInput.tsx#L294-L330","documentation":"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.","triggerScenarios":"Standalone AutocompleteInput (no ReferenceInput wrapper, so isFromReference is false) with optionText as a JSX element and no matchSuggestion prop.","commonSituations":"Developers add custom option rendering on a bare AutocompleteInput and pass inputText (fixing error 161) but forget the companion matchSuggestion used for filtering suggestions.","solutions":["Provide matchSuggestion, e.g. matchSuggestion={filter => choice => choice.name.includes(filter)}","Wrap the input in a ReferenceInput so matching is handled by the reference data provider","Switch optionText to a string or function so default matching applies"],"exampleFix":"// before\n<AutocompleteInput source=\"tags\" choices={tags} optionText={<TagOption />} inputText={t => t.label} />\n// after\n<AutocompleteInput source=\"tags\" choices={tags} optionText={<TagOption />} inputText={t => t.label} matchSuggestion={filter => choice => choice.label.includes(filter)} />","handlingStrategy":"validation","validationCode":"import { isValidElement } from 'react';\nif (isValidElement(optionText) && !isInsideReferenceInput && matchSuggestion === undefined) {\n  throw new Error('element optionText on standalone AutocompleteInput requires matchSuggestion');\n}","typeGuard":"const hasMatchSuggestion = (\n  p: AutocompleteInputProps\n): p is AutocompleteInputProps & { matchSuggestion: NonNullable<AutocompleteInputProps['matchSuggestion']> } =>\n  p.matchSuggestion !== undefined;","tryCatchPattern":"try {\n  render(<AutocompleteInput optionText={<Option />} inputText={t => t.name} />);\n} catch (e) {\n  console.error('Missing matchSuggestion:', e.message);\n  render(<AutocompleteInput optionText=\"name\" />);\n}","preventionTips":["Treat element optionText as requiring inputText + matchSuggestion on standalone inputs","Prefer ReferenceInput wrapping, which provides matching from the reference","Write render tests for each custom autocomplete configuration"],"tags":["react-admin","props-validation","autocompleteinput"],"backgroundTag":"incompatible-props-combination","analyzedSha":"051f511bb0afb5ea565c2d3728bf4dab0a6fa5e0","analyzedAt":"2026-08-30T02:28:14.926Z","schemaVersion":2},"datasetVersion":"2026-08-30T03:17:51.788Z"}