Semantic-Org/Semantic-UI-React

Dropdown: incorrect focus

Open

#2 046 ouverte le 4 sept. 2017

Voir sur GitHub
 (15 commentaires) (0 réactions) (0 assignés)JavaScript (4 065 forks)batch import
bughelp wanted

Métriques du dépôt

Stars
 (13 136 stars)
Métriques de merge PR
 (Aucune PR mergée en 30 j)

Description

This applies to use in Chrome.

Testcase https://react.semantic-ui.com/modules/dropdown#dropdown-example-open-on-focus

Steps to Reproduce

  1. Click on the down arrow (NOT on the text of the drop-down) of the second dropdown
  2. Click on the down arrow again
  3. Press 'shift + tab' to navigate to the first dropdown

Expected The first dropdown should now have the focus

Result The second dropdown retains the focus.

** FIX ** This is because when clicking on the down arrow, its the <i ../> element that obtains the focus.

Applying the style pointer-events: none; to the <i .../> element resolves the issue, when the down arrow is clicked focus is passed through to the dropdown component as expected.

Guide contributeur

Direction de recherche
Appliquez CSS pointer events: none à l'icône de flèche du menu déroulant pour l'empêcher de capturer le focus.
Stack technique
javascriptreactcss
Domaine
frontend
Type d'issue
Bug
DifficultéDifficulté estimée pour un nouveau contributeur, de 1 pour un très petit changement à 5 pour un travail expert.
2
Temps estiméFourchette de temps approximative pour investiguer, implémenter, tester et préparer une pull request.
1-3 heures
Statut d'activitéDisponibilité apparente de l'issue : fraîche, active, ancienne, bloquée ou en attente d'un mainteneur.
Active
ClartéClarté avec laquelle l'issue explique le changement attendu, les critères d'acceptation et la prochaine étape.
Claire
Prérequis
ReactCSS
Accessibilité débutantScore de 1 à 100 estimant l'accessibilité de cette issue pour un premier contributeur.
80