Material-UI 自动完成和 TextField 触发谷歌自动完成

Gim*_*ian 7 javascript reactjs material-ui

我正在尝试在我的项目中实现自动完成组件,但一段时间后我从浏览器获取自动填充/自动完成。你知道我怎么能把它关掉吗?

                        <Autocomplete

                            id="combo-box-demo"
                            options={battleRepos}
                            getOptionLabel={option => option.full_name}
                            style={{ width: 500 }}
                            renderInput={params => (
                                <TextField {...params} 
                                    label="Combo box"  
                                    variant="outlined"
                                    onBlur={event => console.log(event.target.value)}

                                    fullWidth  />
                            )}
                        />
Run Code Online (Sandbox Code Playgroud)

有问题的图片

Rya*_*ell 10

更新

随着@material-ui/core 4.7.0 和@material-ui/lab 4.0.0-alpha.33 的发布,此问题现已修复,不再需要如下所示的解决方法。


这已在最近的拉取请求中修复,但尚未发布(将在下一个版本中发布)。

如果你想在发布之前解决这个问题(可能会在几天内),你可以设置inputProps.autoComplete = "off"如下:

<Autocomplete
    id="combo-box-demo"
    options={battleRepos}
    getOptionLabel={option => option.full_name}
    style={{ width: 500 }}
    renderInput={params => {
        const inputProps = params.inputProps;
        inputProps.autoComplete = "off";
        return (
          <TextField
            {...params}
            inputProps={inputProps}
            label="Combo box"  
            variant="outlined"
            onBlur={event => console.log(event.target.value)}
            fullWidth
          />
        );
      }
    }
/>

Run Code Online (Sandbox Code Playgroud)

  • @JoshuaScott 查看我的更新 - 该错误现已修复。 (2认同)