{"record":{"id":"2b4ff1d6318bddd3","repo":"marmelab/react-admin","slug":"when-optiontext-returns-a-react-element-you-must","errorCode":null,"errorMessage":"When optionText returns a React element, you must also provide the inputText prop","messagePattern":"When optionText returns a React element, you must also provide the inputText prop","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/ra-ui-materialui/src/input/AutocompleteInput.tsx","lineNumber":511,"sourceCode":"        },\n        [\n            clearOnBlur,\n            field,\n            getOptionLabel,\n            selectedChoice,\n            filterValue,\n            debouncedSetFilter,\n            multiple,\n        ]\n    );\n\n    useEffect(() => {\n        if (!multiple) {\n            const optionLabel = getOptionLabel(selectedChoice);\n            if (typeof optionLabel === 'string') {\n                setFilterValue(optionLabel);\n            } else {\n                throw new Error(\n                    'When optionText returns a React element, you must also provide the inputText prop'\n                );\n            }\n        }\n    }, [getOptionLabel, multiple, selectedChoice]);\n\n    const handleInputChange: AutocompleteProps<\n        OptionType,\n        Multiple,\n        DisableClearable,\n        SupportCreate\n    >['onInputChange'] = useEvent((event, newInputValue, reason) => {\n        if (\n            event?.type === 'change' ||\n            !doesQueryMatchSelection(newInputValue)\n        ) {\n            const createOptionLabel =\n                typeof createItemLabel === 'string'","sourceCodeStart":493,"sourceCodeEnd":529,"githubUrl":"https://github.com/marmelab/react-admin/blob/051f511bb0afb5ea565c2d3728bf4dab0a6fa5e0/packages/ra-ui-materialui/src/input/AutocompleteInput.tsx#L493-L529","documentation":"After a selection is made, AutocompleteInput sets the input's filter value to the option label. When getOptionLabel yields a React element instead of a string (because optionText is an element and no valid inputText is configured) it cannot put an element into the text input, so it throws in a useEffect on selection change.","triggerScenarios":"Selecting a choice in a single-value AutocompleteInput whose optionText resolves to a React element while inputText is absent or itself returns an element.","commonSituations":"Same root cause as errors 160-162 but surfacing later, at selection time rather than mount; typical when optionText is a function returning JSX, or inputText was omitted after a refactor.","solutions":["Ensure inputText is provided and returns a plain string for every choice","If optionText is a function, return a string from it (or an object handled by getOptionLabelText with inputText set)","Check that selectedChoice fields used by inputText are not undefined, which can make the label fall back to an element"],"exampleFix":"// before\n<AutocompleteInput source=\"user\" optionText={u => <span>{u.name}</span>} />\n// after\n<AutocompleteInput source=\"user\" optionText={u => <span>{u.name}</span>} inputText={u => u.name} matchSuggestion={f => u => u.name.includes(f)} />","handlingStrategy":"validation","validationCode":"// before rendering, verify every choice yields a string label via the configured inputText\nconst allLabelsAreStrings = choices.every(c => typeof inputText(c) === 'string');\nif (!allLabelsAreStrings) throw new Error('inputText must return a string for every choice');","typeGuard":"const hasStringLabel = (\n  choice: unknown,\n  inputText?: (c: any) => any\n): choice is { id: any } & Record<string, unknown> =>\n  typeof inputText?.(choice) === 'string';","tryCatchPattern":"try {\n  render(<AutocompleteInput optionText={elOptionText} inputText={inputText} />);\n} catch (e) {\n  if (e.message.includes('optionText returns a React element')) {\n    console.error('inputText missing or non-string:', e.message);\n  }\n}","preventionTips":["Ensure inputText returns a string, not JSX or undefined, for all choices","Guard inputText against missing nested fields (e.g. choice.user?.name ?? '')","Test selection behavior, not just initial render, for custom option elements"],"tags":["react-admin","autocompleteinput","selection"],"backgroundTag":"incompatible-props-combination","analyzedSha":"051f511bb0afb5ea565c2d3728bf4dab0a6fa5e0","analyzedAt":"2026-08-30T02:28:14.926Z","schemaVersion":2},"datasetVersion":"2026-08-30T03:17:51.788Z"}