javascript - Material Autocomplete does not work with InputProps - Stack Overflow

admin管理员组

文章数量:1192939

I am trying to change the border of my TextField that is rendered through my Autocomplete, but when I add the InputProps prop, the Autocomplete no longer renders Chips

<Autocomplete
    multiple
    freeSolo
    options={options}
    renderTags={(value, { className, onDelete }) =>
        value.map((option, index) => (
            <Chip
                key={index}
                variant="outlined"
                data-tag-index={index}
                tabIndex={-1}
                label={option}
                className={className}
                color="secondary"
                onDelete={onDelete}
            />
        ))
    }
    renderInput={(params) => (
        <TextField
            {...params}
            id={id}
            className={textFieldStyles.searchField}
            label={label}
            value={value}
            onChange={onChange}
            variant="outlined"
            //InputProps={{
            //     classes: {
            //         input: textFieldStyles.input,
            //         notchedOutline: textFieldStyles.notchedOutline
            //     }
            //}}
            InputLabelProps={{
                classes: {
                    root: textFieldStyles.label
                }
            }}
        />
    )}
/>

The above code works, and once I uncomment the InputProps line, the input no longer renders Chips when an item is selected or entered.

Thanks

I am trying to change the border of my TextField that is rendered through my Autocomplete, but when I add the InputProps prop, the Autocomplete no longer renders Chips

<Autocomplete
    multiple
    freeSolo
    options={options}
    renderTags={(value, { className, onDelete }) =>
        value.map((option, index) => (
            <Chip
                key={index}
                variant="outlined"
                data-tag-index={index}
                tabIndex={-1}
                label={option}
                className={className}
                color="secondary"
                onDelete={onDelete}
            />
        ))
    }
    renderInput={(params) => (
        <TextField
            {...params}
            id={id}
            className={textFieldStyles.searchField}
            label={label}
            value={value}
            onChange={onChange}
            variant="outlined"
            //InputProps={{
            //     classes: {
            //         input: textFieldStyles.input,
            //         notchedOutline: textFieldStyles.notchedOutline
            //     }
            //}}
            InputLabelProps={{
                classes: {
                    root: textFieldStyles.label
                }
            }}
        />
    )}
/>

The above code works, and once I uncomment the InputProps line, the input no longer renders Chips when an item is selected or entered.

Thanks

• javascript
• reactjs
• autocomplete
• material-ui
• textfield

Share Improve this question Follow asked Nov 10, 2019 at 17:47 ArthurArthur 3,94255 gold badges3030 silver badges4949 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 29

This happens because the InputProps attribute is overriding the InputProps parameter of params, you have to merge InputProps property of params:

InputProps={{
    ...params.InputProps,
    classes: {
        input: textFieldStyles.input,
        notchedOutline: textFieldStyles.notchedOutline
    }
}}

本文标签： javascriptMaterial Autocomplete does not work with InputPropsStack Overflow