Semantic-Org/Semantic-UI-React

RFC: Popup more intuitive behavior with multiple `on` events

Open

#2.765 geöffnet am 5. Mai 2018

Auf GitHub ansehen
 (8 Kommentare) (0 Reaktionen) (0 zugewiesene Personen)JavaScript (4.065 Forks)batch import
enhancementhelp wanted

Repository-Metriken

Stars
 (13.136 Stars)
PR-Merge-Metriken
 (Keine gemergten PRs in 30 T)

Beschreibung

Bug Report

The problem happens when using multiple events to trigger Popup. Can be reproduced with <Popup trigger={<button>Show tooltip</button>} content='tooltip' on={['click', 'hover']} but the easiest way is with <Popup trigger={<button>Show tooltip</button>} content='tooltip' on={['click', 'focus']}. Just try clicking the button. For the first time, it opens the popup and immediately closes it. Following clicks work correctly. This problem has been mentioned in #2075 by @austinfox here.

Steps

  1. Go to Semantic UI React Popup demo.
  2. Edit e.g. first example Popup component to contain multiple on events i.e. on={['click', 'focus']}.
  3. Click the popup trigger.

Expected Result

Popup is displayed and stays open.

Actual Result

Popup is displayed and closed immediately.

Version

0.80.0

Testcase

Check the steps section above.

Contributor Guide

Research-Richtung
Untersuchen Sie die Ereignisbehandlungslogik im Quellcode der Popup Komponente, insbesondere wie sie mehrere `on` Ereignistypen verwaltet. Überprüfen Sie den verlinkten Kommentar in Issue #2075 für frühere Diskussionen. Die Korrektur beinhaltet wahrscheinlich sicherzustellen, dass das Popup bei Angabe mehrerer Ereignisse nicht sofort nach dem Öffnen aufgrund von Ereignisausbreitung oder Zustandsverwaltungsproblemen geschlossen wird. Sehen Sie sich die Popup Komponentendatei im Repository an, wahrscheinlich `src/modules/Popup/Popup.js`.
Tech Stack
javascriptreact
Domain
frontend
Issue Type
Fehler
SchwierigkeitGeschätzte Implementierungsschwierigkeit für neue Contributors, von 1 für sehr kleine Änderungen bis 5 für Expertenarbeit.
2
Geschätzte ZeitEin grober Zeitrahmen, um zu recherchieren, zu implementieren, zu testen und einen Pull Request vorzubereiten.
1-3 Stunden
AktivitätsstatusWie verfügbar das Issue gerade wirkt: frisch, aktiv, stale, blockiert oder wartet auf Maintainer-Input.
Aktiv
KlarheitWie klar das Issue die erwartete Änderung, Akzeptanzkriterien und den nächsten Schritt erklärt.
Meist klar
Voraussetzungen
ReactSemantic UI React
EinsteigerfreundlichkeitEin Score von 1 bis 100, der schätzt, wie zugänglich dieses Issue für First-Time Contributors ist.
70