{"record":{"id":"54168463494273f1","repo":"marmelab/react-admin","slug":"resettabletextfield-cannot-display-both-an-endador","errorCode":null,"errorMessage":"ResettableTextField cannot display both an endAdornment and a clear button always visible","messagePattern":"ResettableTextField cannot display both an endAdornment and a clear button always visible","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/ra-ui-materialui/src/input/ResettableTextField.tsx","lineNumber":69,"sourceCode":"                event.preventDefault();\n                onChange && onChange('');\n            },\n            [onChange]\n        );\n\n        const {\n            clearButton,\n            clearIcon,\n            inputAdornedEnd,\n            selectAdornment,\n            visibleClearIcon,\n        } = ResettableTextFieldClasses;\n\n        const { endAdornment, ...InputPropsWithoutEndAdornment } =\n            InputProps || {};\n\n        if (clearAlwaysVisible && endAdornment) {\n            throw new Error(\n                'ResettableTextField cannot display both an endAdornment and a clear button always visible'\n            );\n        }\n\n        const getEndAdornment = () => {\n            if (!resettable) {\n                return endAdornment;\n            } else if (!value) {\n                if (clearAlwaysVisible) {\n                    // show clear button, inactive\n                    return (\n                        <InputAdornment\n                            position=\"end\"\n                            className={\n                                props.select ? selectAdornment : undefined\n                            }\n                        >\n                            <IconButton","sourceCodeStart":51,"sourceCodeEnd":87,"githubUrl":"https://github.com/marmelab/react-admin/blob/051f511bb0afb5ea565c2d3728bf4dab0a6fa5e0/packages/ra-ui-materialui/src/input/ResettableTextField.tsx#L51-L87","documentation":"ResettableTextField renders a clear (reset) button as part of its adornment when resettable is enabled. If the clear button is configured to be always visible (clearAlwaysVisible) AND a custom endAdornment is also supplied via InputProps, both would occupy the same adornment slot and the layout breaks, so the component throws instead.","triggerScenarios":"Passing both `clearAlwaysVisible` and `InputProps={{ endAdornment: ... }}` to ResettableTextField (e.g. a password-visibility toggle) with resettable enabled.","commonSituations":"Adding a password show/hide eye icon to a resettable text field; adding a unit suffix or icon while keeping the clear button always visible; wrapping ResettableTextField with MUI adornment patterns copied from plain TextField usage.","solutions":["Remove the custom endAdornment from InputProps, or drop clearAlwaysVisible so the clear button only appears when relevant.","If both are truly needed, render your icon via the adornment composition the component supports (or use a plain TextField with your own reset logic)."],"exampleFix":"// before\n<ResettableTextField\n  resettable\n  clearAlwaysVisible\n  InputProps={{ endAdornment: <VisibilityToggle /> }}\n/>\n\n// after\n<ResettableTextField\n  resettable\n  InputProps={{ endAdornment: <VisibilityToggle /> }}\n/>","handlingStrategy":"validation","validationCode":"const usesClearAlwaysVisible = 'clearAlwaysVisible' in textFieldProps;\nconst hasEndAdornment = Boolean(textFieldProps.InputProps?.endAdornment);\nif (usesClearAlwaysVisible && hasEndAdornment) {\n  throw new Error('Drop clearAlwaysVisible or the custom endAdornment');\n}","typeGuard":"const isCompatibleInputProps = (p?: { endAdornment?: React.ReactNode }): boolean =>\n  !p || !p.endAdornment;","tryCatchPattern":null,"preventionTips":["Remember clearAlwaysVisible and InputProps.endAdornment are mutually exclusive","For password fields with resettable input, avoid clearAlwaysVisible","Wrap ResettableTextField usage in a shared component enforcing one adornment source"],"tags":["react-admin","material-ui","input","props-conflict"],"backgroundTag":"conflicting-props","analyzedSha":"051f511bb0afb5ea565c2d3728bf4dab0a6fa5e0","analyzedAt":"2026-08-30T02:28:14.926Z","schemaVersion":2},"datasetVersion":"2026-08-30T03:17:51.788Z"}