React: Der Autofokus funktioniert in React 16 nicht mit SSR

Ich denke, wir sollten Autofokus als Attribut ausgeben.

Es sieht so aus, als ob der Hauptnachteil darin besteht, dass autofocus in IE9, iOS Safari und Android-Browser nicht unterstützt wird . Gibt es noch andere Nachteile, die mir fehlen? Wie schwer / mechanisch wäre es, Autofokus über JS hinzuzufügen?

Wenn wir es immer in JS machen, ist es ziemlich einfach, aber es scheint ziemlich schlecht für die Semantik. Es kann eine Weile dauern, bis alle Skripte geladen sind, bevor sie tatsächlich fokussiert werden. Der Benutzer kann in der Zwischenzeit andere Dinge fokussieren und dann wird es plötzlich fokussiert. Da wir mit Fiber asynchron rehydrieren können und möglicherweise auch eine teilweise Hydratation durchführen möchten, kann dies das Ganze noch schlimmer machen, als es bereits ist.

Wir können beides, aber dann haben Sie seltsame Artefakte, bei denen es fokussiert werden könnte, Sie schalten ab und dann wird es wieder fokussiert.

Wir könnten es möglicherweise nur in JS tun, wenn das normale fehlschlägt, aber wir sind uns nicht sicher, wie wir es erkennen sollen, und das könnte viel Code hinzufügen.

Ich bin mir nicht sicher, was der richtige Kompromiss ist, wenn man das Problem der Browserunterstützung berücksichtigt.

Es kann eine Weile dauern, bis alle Skripte geladen sind, bevor sie tatsächlich fokussiert werden.

Ich denke, dies ist ein sehr starker Fall für die Ausgabe eines Attributs. Es hört sich so an, als könnten wir die Richtigkeit nicht garantieren, selbst wenn wir document.activeElement , befindet sich der Benutzer möglicherweise bereits in einem Flow oder hat die Seite nach unten gescrollt. Wir möchten nicht, dass die Seite hochspringt oder dass jemand mitten in einem Tastendruck in ein anderes Eingabefeld tippt.

Es tut mir leid, wenn ein Teil davon eine Wiederholung ist, aber das wäre das Argument, das ich vorbringen würde, wenn jemand ein Problem damit einreichen würde.

Das Ausgeben von Attributen klingt nach dem richtigen Weg. Wenn der Autofokus in Browsern funktionieren soll, die ihn nicht unterstützen, erscheint es am sinnvollsten, am Ende des Körpers ein Skript hinzuzufügen:

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

Was meiner Meinung nach nur dann Probleme verursacht, wenn die HTML-Seite sehr groß ist. Ich denke, es könnte auch nach activeElement suchen (wenn keiner oder Körper dann fokussieren), aber das könnte übertrieben sein.

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

Der ursprüngliche Grund dafür, dass das Autofokus-Attribut nicht ausgegeben wurde, war, dass Browser-Implementierungen in ihrer Behandlung weitgehend inkonsistent waren (einige unterstützen dies nicht, andere konzentrieren sich nur auf das Laden von Seiten usw.). Was meiner Meinung nach bedeutet, dass jeder, der es mit Autofokus ernst meint, es ohnehin manuell über JS anwenden musste. Ich erinnere mich jedoch vage, dass es jetzt mobile Browser gibt, die den JS-Fokus nicht wirklich hören, aber den Autofokus in gewissem Maße berücksichtigen.

Es ist ein Durcheinander, aber es ist ein Verdienst, nur das Attribut auszugeben, und wenn Sie sich stark dafür fühlen, konzentrieren Sie sich manuell. Sie erhalten alle Werkzeuge.

Ich habe mit @trueadm darüber gesprochen und ich denke, das klingt nach einem plausiblen Weg nach vorne:

Reagiere 16

• Geben Sie es in SSR-HTML aus.
• Stellen Sie sicher, dass wir JS-Polyfüllung nicht für hydratisierte Elemente nennen.
• Setzen Sie die Blacklist für die vom Client erstellten Elemente fort und verwenden Sie für diese die JS-Polyfüllung.

Reagiere 17

• Entfernen Sie die JS-Polyfüllung vollständig.
• Warnen Sie, wenn während eines Commits mehr als ein autoFocus -Element hinzugefügt wird (da hier die Browser-Inkonsistenzen auftreten).

Macht das Sinn?

Warnen, wenn während eines Commits mehr als ein Autofokus-Element hinzugefügt wird (da hier die Browser-Inkonsistenzen auftreten).

Browser, zumindest vor nicht allzu langer Zeit, interpretieren das AutoFocus-Attribut ebenfalls inkonsistent. Ich weiß, dass zB FF es nur beim Laden von Seiten honorieren und alle, die dynamisch eingefügt wurden, völlig ignorieren würde. Aber ich habe es schon lange nicht mehr untersucht.

Trotzdem denke ich, dass der Ansatz richtig ist.

Nach einigen grundlegenden Untersuchungen sieht es so aus, als würden die meisten modernen Browser außer Safari autoFocus nach dem Laden der Seite überhaupt nicht respektieren.

Für HTML-Dokumente war dies wahrscheinlich sinnvoll, aber in Apps würde ich erwarten, dass autoFocus für dynamisch eingefügte Elemente berücksichtigt wird, da es sich im Grunde genommen genauso um „Seitenübergänge“ handelt wie das Laden der ersten Seite in SPAs.

Also sollten wir wahrscheinlich die Polyfüllung behalten.

Es wird seltsamer.

Chrome respektiert dynamisch hinzugefügte Elemente mit autoFocus falls noch keine vorhanden waren. Selbst das Erstellen einer Eingabe mit autoFocus , das Hinzufügen zum Dokument und das Entfernen im nächsten Häkchen reicht aus, um die Autofokussierung zukünftig in Chrome hinzugefügter Elemente zu deaktivieren.

Firefox kümmert sich überhaupt nicht um dynamisch hinzugefügte Elemente mit autoFocus .

Und Safari respektiert sie immer.

Behoben in https://github.com/facebook/react/pull/11192.