{"record":{"id":"3a86cec470943559","repo":"marmelab/react-admin","slug":"optiontext-of-type-react-element-is-not-supported","errorCode":null,"errorMessage":"optionText of type React element is not supported when setting emptyText","messagePattern":"optionText of type React element is not supported when setting emptyText","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/ra-ui-materialui/src/input/AutocompleteInput.tsx","lineNumber":297,"sourceCode":"    >(field.value, {\n        choices: finalChoices,\n        // @ts-ignore\n        multiple,\n        optionValue,\n    });\n\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]);","sourceCodeStart":279,"sourceCodeEnd":315,"githubUrl":"https://github.com/marmelab/react-admin/blob/051f511bb0afb5ea565c2d3728bf4dab0a6fa5e0/packages/ra-ui-materialui/src/input/AutocompleteInput.tsx#L279-L315","documentation":"AutocompleteInput validates its prop combinations in a useEffect. optionText can either be a string/field name or a custom React element, but when a React element is supplied, the component can no longer render a plain-text placeholder for the empty choice. Since emptyText must be plain text, react-admin throws immediately rather than rendering a broken option list.","triggerScenarios":"Passing a JSX element as optionText (e.g. optionText={<MyOption />}) together with any defined emptyText prop on AutocompleteInput.","commonSituations":"Developers customize option rendering with a React element and separately add an emptyText label for the 'no choice' option (often after migrating from optionValue/optionText string usage), not realizing the two props are mutually exclusive.","solutions":["Remove the emptyText prop when optionText is a React element, or use a plain string/function for optionText so emptyText is allowed","Render the empty state inside your custom option element itself based on the choice value","Use the inputText prop plus a function optionText that returns a string for the input, keeping emptyText as a string"],"exampleFix":"// before\n<AutocompleteInput source=\"author_id\" optionText={<Option />} emptyText=\"None\" />\n// after\n<AutocompleteInput source=\"author_id\" optionText={<Option />} inputText={choice => choice.name} matchSuggestion={filter => choice => choice.name.includes(filter)} />","handlingStrategy":"validation","validationCode":"import { isValidElement } from 'react';\nif (isValidElement(optionText) && emptyText !== undefined) {\n  throw new Error('optionText element cannot be combined with emptyText');\n}","typeGuard":"const isElementOptionText = (v: unknown): v is React.ReactElement =>\n  React.isValidElement(v);","tryCatchPattern":"try {\n  render(<AutocompleteInput source=\"author_id\" optionText={optionText} emptyText={emptyText} />);\n} catch (e) {\n  console.error('Invalid AutocompleteInput props:', e.message);\n  render(<AutocompleteInput source=\"author_id\" optionText={String(optionText)} />);\n}","preventionTips":["Never combine React-element optionText with emptyText; handle empty rendering inside the element","Keep a prop checklist when customizing AutocompleteInput: element optionText requires inputText and matchSuggestion","Add a unit test rendering every input configuration used in the app"],"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"}