Автозаполнение - добавить левый значок в текстовое поле, которое находится в компоненте автозаполнения

Question

У меня есть компонент автозаполнения, который отображает теги Автозаполнение тегами

, и я хочу отобразить левый значок, но правильно работает только правый значок

Текущее поведение

при добавлении левого значка оно показывает значок, но не позволяет отображать теги внутри textField

Ожидаемое поведение

при добавлении левого значка он должен позволять отображать теги внутри textField

Шаг для воспроизведения:

работает при добавлении конечного значка:

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

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

не работает при добавлении значка запуска

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

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

Answer 1

Проблема в том, что теги отображаются внутри startAdornment, когда вы устанавливаете startAdornment равным значку, он удаляет теги.

, поэтому вы можете установить startAdornment с пустой htmlTag (<>) и визуализируйте ваш соответствующий компонент внутри, а также предыдущее содержимое startAdornment

ex: Это работает для меня

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()} />;
    };