React: لا يعمل التركيز التلقائي مع SSR في React 16

أعتقد أننا يجب أن نصدر ضبط تلقائي للصورة كسمة.

يبدو أن العيب الرئيسي هو أن autofocus غير مدعوم في IE9 و iOS Safari ومتصفح Android . هل هناك عيوب أخرى تنقصني؟ ما مدى صعوبة / ميكانيكية إضافة ضبط تلقائي للصورة عبر JS؟

إذا كنا نفعل ذلك دائمًا في JS ، فهو سهل جدًا ، لكنه يبدو سيئًا جدًا بالنسبة إلى الدلالات. قد يستغرق تحميل جميع البرامج النصية بعض الوقت قبل أن يتم التركيز عليها فعليًا. يمكن للمستخدم التركيز على أشياء أخرى في هذه الأثناء ثم فجأة يصبح مركزًا. نظرًا لأننا باستخدام الألياف يمكننا إعادة الترطيب بشكل غير متزامن وقد نرغب أيضًا في إجراء ترطيب جزئي ، فقد يجعل ذلك أسوأ مما هو عليه بالفعل.

يمكننا القيام بالأمرين معًا ، ولكن بعد ذلك يكون لديك قطع أثرية غريبة حيث قد يتم التركيز عليها ، ثم تتوقف عن العمل ثم يتم التركيز مرة أخرى.

لا يمكننا القيام بذلك إلا في JS إذا فشلت الطريقة العادية ، لكنك لست متأكدًا من كيفية اكتشافها ويمكن أن يضيف ذلك الكثير من التعليمات البرمجية.

لست متأكدًا من المقايضة الصحيحة هنا بالنظر إلى مشكلة دعم المتصفح.

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

أعتقد أن هذه حجة قوية جدًا لإصدار سمة. يبدو أننا لا نستطيع ضمان الصحة ، حتى لو تحققنا من document.activeElement ، فربما يكون المستخدم في تدفق بالفعل أو قد انتقل إلى أسفل الصفحة. لا نريد أن تقفز الصفحة لأعلى أو أن يبدأ شخص ما في الكتابة في مربع إدخال آخر في منتصف الطريق بضغطة زر.

آسف إذا كان البعض من ذلك عبارة عن إعادة صياغة ، ولكن هذه هي الحجة التي سأدلي بها إذا رفع شخص ما قضية حول هذا الموضوع.

تنبعث السمة تبدو وكأنها الطريقة الصحيحة للذهاب. إذا كنت أريد أن يعمل التركيز التلقائي على المتصفحات التي لا تدعمه ، فيبدو أنه من المنطقي إضافة نص برمجي إلى نهاية النص:

    <script>!function(el){el&&el.focus()}(document.querySelector('[autofocus]'))</script>

الذي أعتقد أنه يسبب مشاكل فقط إذا كانت صفحة HTML كبيرة جدًا. أعتقد أنه يمكن أيضًا التحقق من العنصر النشط (إذا لم يكن هناك شيء أو الجسم ثم التركيز) ولكن قد يكون هذا مبالغة.

نسخة إلى https://github.com/facebook/react/issues/3066

كان السبب الأولي لعدم إصدار سمة التركيز التلقائي هو أن تطبيقات المتصفح كانت غير متسقة على نطاق واسع في كيفية معاملتها (بعضها لا يدعمها ، والبعض الآخر يركز فقط على تحميل الصفحة ، إلخ). أي IMHO يعني أن أي شخص جاد بشأن التركيز التلقائي كان عليه أن يطبقه يدويًا عبر JS على أي حال. ومع ذلك ، أتذكر بشكل غامض أن هناك الآن متصفحات للأجهزة المحمولة لا تستمع حقًا إلى تركيز JS ، ولكنها تحترم التركيز التلقائي إلى حد ما.

إنها فوضى ، ولكن هناك بعض المزايا لإصدار السمة فقط ، وإذا كنت تشعر بشدة حيال ذلك ، فأنت تركز يدويًا. لقد تم منحك كل الأدوات.

لقد تحدثت مع trueadm حول هذا وأعتقد أن هذا يبدو وكأنه طريق معقول للمضي قدمًا:

تفاعل 16

• انبعثها في SSR HTML.
• تأكد من أننا لا نستدعي JS polyfill للعناصر المائية.
• استمر في وضعها في القائمة السوداء على العناصر التي أنشأها العميل واستخدم JS polyfill لتلك العناصر.

رد فعل 17

• قم بإزالة JS polyfill تمامًا.
• تحذير إذا كان هناك أكثر من عنصر autoFocus تمت إضافته أثناء الالتزام (لأن هذا هو المكان الذي يحدث فيه عدم تناسق في المتصفح).

هل لهذا معنى؟

تحذير إذا كان هناك أكثر من عنصر تركيز تلقائي تمت إضافته أثناء الالتزام (نظرًا لأن هذا هو المكان الذي تحدث فيه حالات عدم تناسق المتصفح).

المتصفحات ، على الأقل منذ وقت ليس ببعيد ، غير متسقة في كيفية تفسيرها لخاصية التركيز التلقائي أيضًا. أعلم أنه على سبيل المثال ، فإن FF سيحترمه فقط عند تحميل الصفحة ويتجاهل تمامًا أي شيء تم إدراجه ديناميكيًا. لكني لم أقم بمسحها منذ وقت طويل الآن.

مع ذلك ، أعتقد أن النهج صحيح.

بعد إجراء بعض التحقيقات الأساسية ، يبدو أن معظم المتصفحات الحديثة باستثناء Safari لا تحترم autoFocus بعد تحميل الصفحة على الإطلاق.

ربما يكون ذلك منطقيًا بالنسبة لمستندات HTML ، ولكن في التطبيقات أتوقع أن يتم احترام autoFocus للعناصر المدرجة ديناميكيًا نظرًا لأنها "انتقالات الصفحة" بشكل أساسي مثل تحميل الصفحة الأولى في SPAs.

لذا ربما يجب علينا الاحتفاظ بالبوليفيل.

يصبح الأمر أكثر غرابة.

يحترم Chrome العناصر المضافة ديناميكيًا بـ autoFocus إذا لم يكن هناك عنصر من قبل. حتى إنشاء إدخال بـ autoFocus ، وإضافته إلى المستند ، وإزالته في العلامة التالية يكفي لتعطيل التركيز التلقائي لأي عناصر مضافة في المستقبل في Chrome.

لا يهتم Firefox بأي عناصر مضافة ديناميكيًا باستخدام autoFocus على الإطلاق.

ودائمًا ما تحترمهم Safari.

ثابت في https://github.com/facebook/react/pull/11192.