marmelab/react-admin · error · Error

ResettableTextField cannot display both an endAdornment and

Error message

ResettableTextField cannot display both an endAdornment and a clear button always visible

What it means

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.

Source

Thrown at packages/ra-ui-materialui/src/input/ResettableTextField.tsx:69

                event.preventDefault();
                onChange && onChange('');
            },
            [onChange]
        );

        const {
            clearButton,
            clearIcon,
            inputAdornedEnd,
            selectAdornment,
            visibleClearIcon,
        } = ResettableTextFieldClasses;

        const { endAdornment, ...InputPropsWithoutEndAdornment } =
            InputProps || {};

        if (clearAlwaysVisible && endAdornment) {
            throw new Error(
                'ResettableTextField cannot display both an endAdornment and a clear button always visible'
            );
        }

        const getEndAdornment = () => {
            if (!resettable) {
                return endAdornment;
            } else if (!value) {
                if (clearAlwaysVisible) {
                    // show clear button, inactive
                    return (
                        <InputAdornment
                            position="end"
                            className={
                                props.select ? selectAdornment : undefined
                            }
                        >
                            <IconButton

View on GitHub (pinned to 051f511bb0)

Solutions

1. Remove the custom endAdornment from InputProps, or drop clearAlwaysVisible so the clear button only appears when relevant.
2. 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).

Example fix

// before
<ResettableTextField
  resettable
  clearAlwaysVisible
  InputProps={{ endAdornment: <VisibilityToggle /> }}
/>

// after
<ResettableTextField
  resettable
  InputProps={{ endAdornment: <VisibilityToggle /> }}
/>

const usesClearAlwaysVisible = 'clearAlwaysVisible' in textFieldProps;
const hasEndAdornment = Boolean(textFieldProps.InputProps?.endAdornment);
if (usesClearAlwaysVisible && hasEndAdornment) {
  throw new Error('Drop clearAlwaysVisible or the custom endAdornment');
}

const isCompatibleInputProps = (p?: { endAdornment?: React.ReactNode }): boolean =>
  !p || !p.endAdornment;

When it happens

Trigger: Passing both `clearAlwaysVisible` and `InputProps={{ endAdornment: ... }}` to ResettableTextField (e.g. a password-visibility toggle) with resettable enabled.

Common situations: 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.

Related errors

• <ReferenceArrayInputBase> only accepts a single child (like
• <ReferenceArrayInputBase> requires either a 'render' prop or
• useCanAccess must be used inside a <Resource> component or p
• useCreateController requires a non-empty resource prop or co
• useEditController requires a non-empty resource prop or cont

AI-assisted analysis of marmelab/react-admin@051f511bb0 (2026-08-30). Data as JSON: /api/errors/54168463494273f1. Report an issue: GitHub.