{"record":{"id":"2f8ac368f0673e9a","repo":"marmelab/react-admin","slug":"if-you-provided-a-react-element-for-the-optiontex","errorCode":null,"errorMessage":"\nIf you provided a React element for the optionText prop, you must also provide the inputText prop (used for the text input)","messagePattern":"\nIf you provided a React element for the optionText prop, you must also provide the inputText prop \\(used for the text input\\)","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/ra-ui-materialui/src/input/AutocompleteInput.tsx","lineNumber":303,"sourceCode":"\n    useEffect(() => {\n        if (emptyValue == null) {\n            throw new Error(\n                `emptyValue being set to null or undefined is not supported. Use parse to turn the empty string into null.`\n            );\n        }\n    }, [emptyValue]);\n\n    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.`","sourceCodeStart":285,"sourceCodeEnd":321,"githubUrl":"https://github.com/marmelab/react-admin/blob/051f511bb0afb5ea565c2d3728bf4dab0a6fa5e0/packages/ra-ui-materialui/src/input/AutocompleteInput.tsx#L285-L321","documentation":"When optionText is a React element, AutocompleteInput cannot derive plain text to display inside the MUI TextField while the user types. The library requires an explicit inputText function/prop that converts a choice into a string, and throws in a useEffect if it is missing.","triggerScenarios":"Passing a JSX element as optionText without also passing inputText on a standalone AutocompleteInput (not wrapped in ReferenceInput).","commonSituations":"Custom option rendering (avatars, two-line options) configured but the developer forgot that the collapsed input needs a string representation; commonly seen when copying examples that use ReferenceInput, where isFromReference bypasses this check.","solutions":["Add an inputText prop, e.g. inputText={choice => choice.name}, returning a plain string","Alternatively use a function optionText that returns a string instead of a React element","If inside a ReferenceInput, ensure optionText is passed in a form the reference input supports (function or string)"],"exampleFix":"// before\n<AutocompleteInput source=\"author_id\" optionText={<Option />} />\n// after\n<AutocompleteInput source=\"author_id\" optionText={<Option />} inputText={choice => choice.fullName} matchSuggestion={...} />","handlingStrategy":"validation","validationCode":"import { isValidElement } from 'react';\nif (isValidElement(optionText) && inputText === undefined) {\n  throw new Error('element optionText requires inputText');\n}","typeGuard":"const hasInputText = (\n  p: AutocompleteInputProps\n): p is AutocompleteInputProps & { inputText: NonNullable<AutocompleteInputProps['inputText']> } =>\n  p.inputText !== undefined;","tryCatchPattern":"try {\n  render(<AutocompleteInput optionText={<Option />} />);\n} catch (e) {\n  console.warn('Falling back to string optionText:', e.message);\n  render(<AutocompleteInput optionText=\"name\" />);\n}","preventionTips":["Whenever optionText is a JSX element, immediately add inputText and matchSuggestion","Note that inputs inside ReferenceInput bypass this check; standalone inputs do not","Lint custom input wrappers to enforce the required prop trio"],"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"}