React-tags: Verlust des Autofokus bei der Eingabe nach dem Löschen des Tags

Erstellt am 6. Mai 2020  ·  10Kommentare  ·  Quelle: i-like-robots/react-tags

Erwartetes Verhalten

Ich erwarte einen Fokus auf die Eingabe, auch wenn ich ein Tag lösche

Aktuelles Verhalten

Die Eingabe verliert den Fokus, nachdem ich ein hinzugefügtes Tag lösche

Schritte zum Reproduzieren

Schritte zum Reproduzieren des Problems:

  1. Geben Sie ein Land ein
  2. Wählen Sie ein Land aus der Dropdown-Liste aus
  3. lösche das Land aus dem Tag
  4. Eingabe verliert Autofokus

Screenshots

1
2
3

Ihre Umgebung

  • Betriebssystem: Windows 10.0
  • Browser: Chrome [Version 81.0.4044.138 (Offizieller Build) (64-Bit)]
  • Version der Komponente: [5.12.1]
  • Reaktionsversion: [16.13.0]
bug

Alle 10 Kommentare

lösche das Land aus dem Tag

Durch Drücken der Rücktaste bei leerer Eingabe oder durch Klicken auf das Tag?

Entschuldigung, es ist durch Drücken der Schließen-Schaltfläche auf dem Tag. Wenn ich es mit der Rücktaste lösche, ist der Autofokus da

Danke für die zusätzliche Info @ekinalcar.

Da das Element mit dem Fokus zerstört wird, gehe ich davon aus, dass der Fokus standardmäßig auf das Fenster zurückgesetzt wird ... nicht ideal! Ich vermute, wir müssen aufzeichnen, woher der Fokus bei der Landung auf dem Tag kam, und ihn dorthin zurückgeben, wenn er entfernt wurde.

Danke für deine schnelle Antwort @i-like-robots

Beim Löschereignis mit Rücktaste liegt der Fokus auf der gleichen Eingabe statt auf dem Fenster, auch wenn die Eingabe leer ist (ohne Tags).

Hallo @ekinalcar - ich konnte das

Allerdings geht der Fokus immer verloren, wenn man eine Tastatur verwendet und die Tags durch Drücken der Leertaste "anklickt", was sicherlich nicht beabsichtigt ist. Hoffentlich wird die Behebung dieses Problems auch das zeitweilige Problem in Chrome beheben.

Gibt es eine Möglichkeit, dies optional zu machen ? Ich habe ein unerwünschtes Verhalten, das beim Löschen eines Tags ausgelöst wird, daher möchte ich nicht, dass die Eingabe immer den Fokus zurücknimmt.

Könnten Sie Ihren Anwendungsfall @krozett beschreiben ? Ich bin sicher, dass es bessere Lösungen gibt, als ich derzeit implementiert habe, aber ich denke, es ist wichtig, dass der Cursor _irgendwo_ nützlich ist. Vielleicht könnte ich eine Bedingung hinzufügen, die eine Neupositionierung des Cursors im handleDelete/onDelete Rückruf ermöglicht.

@i-like-robots Vielleicht wäre es besser, wenn ich dafür ein Feature-Request-Ticket erstellen würde. Aber im Grunde habe ich ein spezielles Verhalten für mobile Geräte, bei dem ein Benutzer auf eine Eingabe drückt und ich ein Overlay verwende, um alles außer dieser Eingabe auszublenden, um Platz auf dem Bildschirm für die Tastatur und Vorschläge zur automatischen Vervollständigung zu lassen. Wenn kein Element fokussiert ist, ist das gesamte Formular sichtbar. Aber beim Löschen eines Tags möchte ich nicht, dass die Eingabe automatisch fokussiert wird, da der Benutzer wahrscheinlich nur das Tag löschen wollte und nicht beabsichtigt, weiter in das Suchfeld zu tippen. Der Autofokus bewirkt, dass die Eingabe zurück in den "Screen-Domination" -Modus springt, was ich nicht möchte. Nur ein bewusster Fokus sollte dies tun.

Das macht Sinn @krozett - vielleicht wäre eine bessere Lösung aufzuzeichnen, woher der Fokus kam (auf focusin ) und den Cursor dorthin zurückzubringen, wenn das Tag entfernt wird 🤔

@i-like-robots Auf jeden Fall bin ich mir sicher, dass v6 bald kommt, also sollte ich mir vielleicht zuerst das Verhalten dafür ansehen, um zu sehen, ob einer seiner Event-Handler das tut, was ich brauche. 😉

War diese Seite hilfreich?
0 / 5 - 0 Bewertungen

Verwandte Themen

luciemac picture luciemac  ·  7Kommentare

V6
i-like-robots picture i-like-robots  ·  11Kommentare

famouspotatoes picture famouspotatoes  ·  5Kommentare

williamsidewalk picture williamsidewalk  ·  4Kommentare

yrik picture yrik  ·  10Kommentare