React: ऑटोफोकस प्रतिक्रिया 16 में SSR के साथ काम नहीं करता है

मुझे लगता है कि हमें एक विशेषता के रूप में ऑटोफोकस का उत्सर्जन करना चाहिए।

ऐसा लगता है कि मुख्य दोष यह है कि IE9, iOS Safari और Android ब्राउज़र में autofocus समर्थित नहीं है । क्या कोई अन्य कमियां हैं जो मुझे याद आ रही हैं? JS के माध्यम से ऑटोफोकस जोड़ना कितना कठिन / यांत्रिक होगा?

यदि हम हमेशा इसे JS में करते हैं, तो यह बहुत आसान है, लेकिन यह शब्दार्थ के लिए बहुत बुरा लगता है। सभी लिपियों को लोड होने में समय लग सकता है इससे पहले कि यह वास्तव में केंद्रित हो जाए। उपयोगकर्ता इस बीच अन्य चीजों पर ध्यान केंद्रित कर सकता है और फिर अचानक वह केंद्रित हो जाता है। फाइबर के साथ चूंकि हम एसिंक्रोनस रूप से रिहाइड्रेट कर सकते हैं और हम आंशिक हाइड्रेशन भी करना चाहते हैं, जिससे यह हो सकता है कि यह पहले से भी बदतर हो।

हम दोनों कर सकते हैं लेकिन फिर आपके पास अजीब कलाकृतियां हैं जहां यह केंद्रित हो सकता है, आप बंद हो जाते हैं और फिर यह फिर से केंद्रित हो जाता है।

हम संभावित रूप से इसे केवल JS में कर सकते हैं यदि सामान्य विफल रहता है, लेकिन यह निश्चित नहीं है कि इसका पता कैसे लगाया जाए और यह बहुत सारे कोड जोड़ सकता है।

मुझे यकीन नहीं है कि सही ट्रेडऑफ़ यहाँ ब्राउज़र समर्थन मुद्दा क्या है।

सभी लिपियों को लोड होने में समय लग सकता है इससे पहले कि यह वास्तव में केंद्रित हो जाए।

मुझे लगता है कि यह एक विशेषता को छोड़ने के लिए एक बहुत मजबूत मामला है। ऐसा लगता है कि हम शुद्धता की गारंटी नहीं दे सकते, भले ही हम document.activeElement जाँच करें, उपयोगकर्ता पहले से ही प्रवाह में हो सकता है या पृष्ठ को नीचे स्क्रॉल कर सकता है। हम नहीं चाहते हैं कि पेज उछल जाए या कोई व्यक्ति किसी महत्वपूर्ण स्ट्रोक के माध्यम से किसी अन्य इनपुट बॉक्स मिडवे में टाइप करना शुरू कर दे।

खेद है कि अगर उस में से कुछ एक rehash है, लेकिन यह तर्क मैं होगा अगर किसी को इसके बारे में एक मुद्दा दायर किया जाएगा।

छोड़ने की विशेषता जाने का सही तरीका लगता है। अगर मैं चाहता हूं कि ऑटोफोकस उन ब्राउज़रों पर काम करे जो इसका समर्थन नहीं करते हैं तो ऐसा लगता है कि शरीर के अंत में स्क्रिप्ट जोड़ने के लिए सबसे अधिक समझदार है:

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

जो मुझे लगता है कि केवल मुद्दों का कारण बनता है अगर HTML पेज बहुत बड़ा है। मुझे लगता है कि यह सक्रियण के लिए भी जांच कर सकता है (यदि कोई भी या शरीर नहीं है तो ध्यान दें) लेकिन यह ओवरकिल हो सकता है।

cc https://github.com/facebook/react/issues/3066

ऑटोफोकस-विशेषता को न छोड़ने का प्रारंभिक कारण यह था कि ब्राउज़र कार्यान्वयन व्यापक रूप से असंगत थे कि उन्होंने इसका इलाज कैसे किया (कुछ का समर्थन नहीं करता है, कुछ केवल पृष्ठ लोड आदि पर ध्यान केंद्रित करते हैं)। IMHO का मतलब है कि जो कोई भी ऑटोफोकस के बारे में गंभीर है, उसे जेएस के माध्यम से मैन्युअल रूप से लागू करना होगा। हालाँकि, मुझे अब याद है कि अब मोबाइल ब्राउज़र हैं जो वास्तव में JS ध्यान केंद्रित नहीं करते हैं, लेकिन कुछ हद तक ऑटोफोकस का सम्मान करते हैं।

यह एक गड़बड़ है, लेकिन सिर्फ विशेषता को छोड़ने के लिए कुछ योग्यता है, और यदि आप इसके बारे में दृढ़ता से महसूस करते हैं तो आप मैन्युअल रूप से ध्यान केंद्रित करते हैं। आपको सभी उपकरण दिए गए हैं।

मैंने इसके बारे में

प्रतिक्रिया 16

• इसे SSR HTML में उत्सर्जित करें।
• सुनिश्चित करें कि हम हाइड्रेटेड तत्वों के लिए JS पॉलीफिल को नहीं कहते हैं।
• क्लाइंट द्वारा बनाए गए तत्वों पर इसे ब्लैकलिस्ट करते रहें और उन लोगों के लिए JS polyfill का उपयोग करें।

प्रतिक्रिया १ 17

• जेएस पॉलीफिल को पूरी तरह से हटा दें।
• चेतावनी दें कि यदि एक कमिट के दौरान एक autoFocus एलिमेंट जोड़ा गया है (क्योंकि यह वह जगह है जहां ब्राउज़र असंगतता है)।

इसका कोई मतलब भी है क्या?

चेतावनी दें कि यदि एक कमिट के दौरान एक से अधिक ऑटोफोकस तत्व जोड़े गए हैं (क्योंकि यह वह जगह है जहां ब्राउज़र असंगतताएं होती हैं)।

ब्राउज़र, कम से कम बहुत पहले नहीं, असंगत हैं कि वे ऑटोफोकस विशेषता की व्याख्या कैसे करते हैं। मुझे पता है कि उदाहरण के लिए, एफएफ केवल पगेलॉड पर इसका सम्मान करेगा और पूरी तरह से किसी भी तरह की अनदेखी करेगा जो गतिशील रूप से डाला गया था। लेकिन मैंने अभी लंबे समय में इसका सर्वेक्षण नहीं किया है।

फिर भी, मुझे लगता है कि दृष्टिकोण सही है।

कुछ बुनियादी जांच के बाद यह सबसे आधुनिक ब्राउज़रों की तरह दिखता है सिवाय सफारी के पेज लोड के बाद autoFocus सम्मान नहीं करते हैं।

शायद यह HTML दस्तावेज़ों के लिए समझ में आता है, लेकिन क्षुधा में मैं autoFocus गतिशील रूप से सम्मिलित तत्वों के लिए सम्मान की उम्मीद करूंगा क्योंकि वे मूल रूप से "पृष्ठ बदलाव" हैं, क्योंकि एसपीए में पहला पृष्ठ लोड है।

इसलिए हमें शायद पॉलीफिल रखना चाहिए।

यह निराई हो जाती है।

यदि कोई पहले नहीं हुआ है तो Chrome autoFocus साथ गतिशील रूप से जोड़े गए तत्वों का सम्मान करता है। यहां तक ​​कि autoFocus साथ एक इनपुट बनाते हुए, इसे दस्तावेज़ में जोड़ते हुए, और इसे अगले टिक में हटाकर क्रोम में भविष्य में जोड़े गए किसी भी तत्व के ऑटोफोकसिंग को अक्षम करने के लिए पर्याप्त है।

फ़ायरफ़ॉक्स सिर्फ autoFocus साथ किसी भी गतिशील रूप से जोड़े गए तत्वों की परवाह नहीं करता है।

और सफारी हमेशा उनका सम्मान करता है।

Https://github.com/facebook/react/pull/11192 में फिक्स्ड