React: الخطأ: Firefox: الإكمال التلقائي / الملء التلقائي لا يزال لا يعمل

تم إنشاؤها على ٢٣ مايو ٢٠٢٠ · 3تعليقات · مصدر: facebook/react

الوصف وخطوات إعادة الإنتاج ومثال وضع الحماية راجع # 17022!
لا تزال وظيفة الإكمال التلقائي الأصلية من Firefox لا تعمل.

يؤثر هذا أيضًا على الأطر الأخرى (antd ، واجهة المستخدم المادية):

سيكون من الرائع أن يمنحها أحد أعضاء مجتمع التفاعل فرصة لأنني أعتقد أن الإكمال التلقائي الأصلي هو ميزة UX مهمة للغاية.

Unconfirmed

مصدر

Hadsch

التعليق الأكثر فائدة

لقد بحثت في هذا ويبدو أنه يحدث لأن React تعيّن defaultValue لعقدة DOM المدخلة إلى value للمدخلات المضبوطة. عندما ترسل شيئًا في Firefox حيث node.value === node.defaultValue لا يحفظه للملء التلقائي. لم يتم توثيقه في أي مكان ، لقد اكتشفت الاختبار (بدون React أيضًا).

إزالة هذه "" تحل المشكلة:
https://github.com/facebook/react/blob/1d85bb3ce13401644a5e345f8bc84522c59a951c/packages/react-dom/src/client/ReactDOMInput.js#L420

السبب وراء قيام React بتعيين defaultValue إلى value هو أنه إذا كان لديك إدخال بـ type="reset" وقمت بالنقر فوقه ، فستحصل على حقول فارغة في التحكم الخاص بك المدخلات إذا قمت بإزالة هذا السطر (إعادة التصيير التالية ستصلحها بالرغم من ذلك). على الأقل هذا ما أفهمه من خلال تصفح الكود.

يمكنك جعل الإكمال التلقائي / الملء التلقائي يعمل على Firefox باستخدام إدخال متحكم فيه بجعل defaultValue يعيد سلسلة فارغة:

  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 من الحفظ للملء التلقائي 🤷‍♀️

أنا / كنت أعمل على علاقات عامة لحل هذه المشكلة .. ولكن ، ربما يستطيع Firefox حلها من جانبهم؟ 🙈 (غير واضح ما إذا كان خطأ)
سيكون من الرائع معرفة ما إذا كان أي شخص من فريق React الأساسي على دراية بالمشكلة و / أو ما يمكننا فعله حيالها.

تحرير: هذا عرض توضيحي يوضح المشكلة في Firefox. إنه كود HTML + 3 سطر JS عادي:
https://codesandbox.io/s/naughty-feather-vwl6v؟file=/index.html
لذلك فهي ليست مشكلة React في حد ذاتها 🤔

eddyw في ٣٠ مايو ٢٠٢٠

👍3

ال 3 كومينتر

إزالة هذه "" تحل المشكلة:
https://github.com/facebook/react/blob/1d85bb3ce13401644a5e345f8bc84522c59a951c/packages/react-dom/src/client/ReactDOMInput.js#L420

  function handleChange(event) {
    Object.defineProperty(event.target, "defaultValue", {
      configurable: true,
      get() { return "" },
      set() {},
    });
    setValue(event.target.value);
  }