React: バグ:Firefox:オートコンプリート/オートフィルがまだ機能しない

作成日 2020年05月23日  ·  3コメント  ·  ソース: facebook/react

説明、再現手順、サンドボックスの例は#17022を参照してください。
Firefoxのネイティブオートコンプリート機能はまだ機能していません。

これは他のフレームワーク(antd、マテリアルUI)にも影響します。

ネイティブオートコンプリートは非常に重要なUX機能だと思うので、reactコミュニティの誰かがそれを試してみることができれば素晴らしいと思います。

Unconfirmed

最も参考になるコメント

私はこれを調べましたが、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の問題ではありません🤔

全てのコメント3件

私はこれを調べましたが、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の複製だと思います

このページは役に立ちましたか?
0 / 5 - 0 評価