説明、再現手順、サンドボックスの例は#17022を参照してください。
Firefoxのネイティブオートコンプリート機能はまだ機能していません。
これは他のフレームワーク(antd、マテリアルUI)にも影響します。
ネイティブオートコンプリートは非常に重要なUX機能だと思うので、reactコミュニティの誰かがそれを試してみることができれば素晴らしいと思います。
私はこれを調べましたが、Reactが入力DOMノードのdefaultValue
value
を制御された入力の現在のnode.value === node.defaultValue
でFirefoxに何かを送信すると、自動入力用に保存されません。 それはどこにも文書化されていません、私はちょうどテストを見つけました(Reactもなしで)。
これを削除すると、問題が「解決」されます。
https://github.com/facebook/react/blob/1d85bb3ce13401644a5e345f8bc84522c59a951c/packages/react-dom/src/client/ReactDOMInput.js#L420
リアクト理由は割り当てませんdefaultValue
に現在のvalue
あなたが持つ入力があればあるためであるtype="reset"
、あなたはそれをクリックし、あなたがあなたのコントロールで空白のフィールドを取得したいですその行を削除した場合の入力(ただし、次の再レンダリングで修正されます)。 少なくとも、コードを閲覧することで私が理解できることです。
defaultValue
空の文字列を返すようにすることで、Firefoxで制御された入力のオートコンプリート/オートフィルを機能させることができます。
function handleChange(event) {
Object.defineProperty(event.target, "defaultValue", {
configurable: true,
get() { return "" },
set() {},
});
setValue(event.target.value);
}
これは、 type="reset"
がない限り機能します。 それ以外の場合は、すべてのフィールドが空白としてリセットされていることに気付くでしょう(ただし、次の再レンダリングで修正されます)。 これはお勧めしませんが、これは「ハック」であり、100%信頼できると言えるほどどこにも使用していません。
とにかく、これはおそらくFirefoxのバグまたは機能です-(バグ?)しかし、スペック、MDN、またはオートフィルのために保存からnode.value === node.defaultValue
が救済されるべき理由を説明する他の場所には何も見つかりませんでした🤷♀️
私はこれを解決するためにPRに取り組んでいます..しかし、Firefoxは彼らの側でそれを解決できるでしょうか? 🙈(バグかどうかは不明)
Reactコアチームの誰かがこの問題やそれに対して何ができるかを知っているかどうかを知ることは素晴らしいことです。
編集:これはFirefoxの問題を示すデモです。 プレーンなHTML + 3行のJSコードです:
https://codesandbox.io/s/naughty-feather-vwl6v?file=/index.html
したがって、それ自体はReactの問題ではありません🤔
興味のある人がいたら、私はこれを開きました:
https://bugzilla.mozilla.org/show_bug.cgi?id=1642570
😅
これは#15739の複製だと思います
最も参考になるコメント
私はこれを調べましたが、Reactが入力DOMノードの
defaultValue
value
を制御された入力の現在のnode.value === node.defaultValue
でFirefoxに何かを送信すると、自動入力用に保存されません。 それはどこにも文書化されていません、私はちょうどテストを見つけました(Reactもなしで)。これを削除すると、問題が「解決」されます。
https://github.com/facebook/react/blob/1d85bb3ce13401644a5e345f8bc84522c59a951c/packages/react-dom/src/client/ReactDOMInput.js#L420
リアクト理由は割り当てません
defaultValue
に現在のvalue
あなたが持つ入力があればあるためであるtype="reset"
、あなたはそれをクリックし、あなたがあなたのコントロールで空白のフィールドを取得したいですその行を削除した場合の入力(ただし、次の再レンダリングで修正されます)。 少なくとも、コードを閲覧することで私が理解できることです。defaultValue
空の文字列を返すようにすることで、Firefoxで制御された入力のオートコンプリート/オートフィルを機能させることができます。これは、
type="reset"
がない限り機能します。 それ以外の場合は、すべてのフィールドが空白としてリセットされていることに気付くでしょう(ただし、次の再レンダリングで修正されます)。 これはお勧めしませんが、これは「ハック」であり、100%信頼できると言えるほどどこにも使用していません。とにかく、これはおそらくFirefoxのバグまたは機能です-(バグ?)しかし、スペック、MDN、またはオートフィルのために保存から
node.value === node.defaultValue
が救済されるべき理由を説明する他の場所には何も見つかりませんでした🤷♀️私はこれを解決するためにPRに取り組んでいます..しかし、Firefoxは彼らの側でそれを解決できるでしょうか? 🙈(バグかどうかは不明)
Reactコアチームの誰かがこの問題やそれに対して何ができるかを知っているかどうかを知ることは素晴らしいことです。
編集:これはFirefoxの問題を示すデモです。 プレーンなHTML + 3行のJSコードです:
https://codesandbox.io/s/naughty-feather-vwl6v?file=/index.html
したがって、それ自体はReactの問題ではありません🤔