CODEWITHSUNDEEP
reactjstypescriptmaterial-ui
H.Hattab
H.Hattab

Reputation: 113

Autocomplete - Add left icon to text field which is in an autocomplete component

I have an autocomplete component which render tags Autocomplete with tags

and I want to render a left icon but only the right icon works correctly

Current Behavior

when adding a left icon it shows the icon but doesn't let rendering the tags inside the textField

Expected Behavior

when adding a left icon it should let rendering the tags inside the textField

Step to reproduce:

works when adding the end icon:

 const renderInput = (params: Params): ReactNode => {
        if (leftIcon) params.InputProps.endAdornment = <InputAdornment position="end">{leftIcon}</InputAdornment>;

        return <TextField {...params} variant="outlined" placeholder={getPlaceHolderText()} />;
    };

doesn't work when adding the start icon

const renderInput = (params: Params): ReactNode => {
        if (leftIcon) params.InputProps.startAdornment = <InputAdornment position="start">{leftIcon}</InputAdornment>;

        return <TextField {...params} variant="outlined" placeholder={getPlaceHolderText()} />;
    };

Upvotes: 1

Views: 2553

Answers (1)

H.Hattab
H.Hattab

Reputation: 113

The problem is because the tags are rendered inside the startAdornment, when you set the startAdornment to be equal to the icon it deletes the tags.

so you can set the startAdornment with an empty htmlTag (<>) and render your relevant component inside and also the previous content of the startAdornment

ex: It works to me

const renderInput = (params: Params): ReactNode => {
        if (leftIcon)
            params.InputProps.startAdornment = (
                <>
                    <InputAdornment position="start">{leftIcon}</InputAdornment>
                    {params.InputProps.startAdornment}
                </>
            );

        return <TextField {...params} variant="outlined" placeholder={getPlaceHolderText()} />;
    };

Upvotes: 4

Related Questions