Material-UI Autocomplete & TextField 觸發谷歌自動完成

Question

我正在嘗試將自動完成組件實現到我的項目中，但一段時間后我會從瀏覽器中獲取自動填充/自動完成功能。 你知道我怎么能把它關掉嗎？

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

Answer 1

更新

隨着@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
          />
        );
      }
    }
/>

Answer 2

即使是最新的：

 "@material-ui/core" 
 "@material-ui/lab"

其中包含設置為'off'的 autoComplete 屬性，我無法將自動填充框 go 移開。

還嘗試在表單標簽<form autoComplete="off">...</form>上設置屬性

無濟於事。

解決問題的方法是將自動完成字段設置為“新密碼”

<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" />
    }} 
/>