[英]Material-UI Autocomplete & TextField triggers google autocomplete
I am trying to implement the Autocomplete component into my project but am getting the autofill/autocomplete from the browser after some time.我正在尝试将自动完成组件实现到我的项目中,但一段时间后我会从浏览器中获取自动填充/自动完成功能。 Do you know how I can set it to off?
你知道我怎么能把它关掉吗?
<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 />
)}
/>
UPDATE更新
With the release of @material-ui/core 4.7.0 and @material-ui/lab 4.0.0-alpha.33, this is now fixed and no longer requires the workaround shown below.随着@material-ui/core 4.7.0 和@material-ui/lab 4.0.0-alpha.33 的发布,该问题现已得到修复,不再需要下面显示的解决方法。
This has been fixed in a recent pull request , but is not yet released (will be in the next release).这已在最近的拉取请求中得到修复,但尚未发布(将在下一个版本中发布)。
If you want to work around this prior to it being released (which will likely be within a few days), you can set inputProps.autoComplete = "off"
like in the following:如果您想在它发布之前解决这个问题(可能会在几天内),您可以设置
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
/>
);
}
}
/>
Even with the latest:即使是最新的:
"@material-ui/core"
"@material-ui/lab"
which contains the autoComplete property set to 'off'
, I wasn't able to get the autofill box go away.其中包含设置为
'off'
的 autoComplete 属性,我无法将自动填充框 go 移开。
Also tried setting the attribute on the form tag <form autoComplete="off">...</form>
还尝试在表单标签
<form autoComplete="off">...</form>
上设置属性
To no avail.无济于事。
The thing which resolved the issue was setting the autoComplete field to 'new-password'解决问题的方法是将自动完成字段设置为“新密码”
<Autocomplete
id='id'
options={data}
onChange={(e, val) => input.onChange(val)}
renderInput={(params) => {
params.inputProps.autoComplete = 'new-password';
return <TextField {...params}
label={label} placeholder="Type to Search" />
}}
/>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.