reactjs/react-modal

Pressing enter key to close button closes the modal but the event is attached to opener element and reopens the modal

Open

Aperta il 18 giu 2022

Vedi su GitHub
 (12 commenti) (0 reazioni) (0 assegnatari)JavaScript (7294 star) (828 fork)batch import
discussioneventshelp wantedmaybe bugneeds info

Descrizione

Summary:

Steps to reproduce:

  1. Visit my demo on Codesandbox https://codesandbox.io/s/react-modal-vivyxc?file=/src/index.js
  2. Click 'Open Modal' button and press Tab. This will focus the close button
  3. Press Enter this closes the modal but reopens it. I know this is because of the onKeyUp event listener to anchor tag but this function is needed for other purposes.

Expected behavior:

Closes modal and focus move to the opener element( in this case, anchor tag)

Link to example of issue:

Codesandbox https://codesandbox.io/s/react-modal-vivyxc?file=/src/index.js

Additional notes:

Is there a way to solve this issue without removing the onKeyUp event handler?

Thanks.

Guida contributor

Tech stack
javascriptreact
Dominio
frontendaccessibility
Tipo issue
bug
DifficoltàQuanto dovrebbe essere impegnativa per un nuovo contributor.
3
Tempo stimatoTempo stimato per completare e verificare uno scope piccolo.
1-3 hours
Stato attivitàQuanto è probabile che la issue sia ancora attiva e reviewable.
active
ChiarezzaQuanto chiaramente la issue descrive problema, scope e risultato atteso.
clear
Prerequisiti
Basic React knowledgeUnderstanding of event propagation
Adatta ai principiantiQuanto la issue è adatta a contributor alla prima esperienza.
70
Direzione di ricerca
Start by examining the provided CodeSandbox (https://codesandbox.io/s/react modal vivyxc) to understand the current modal component structure. Focus on the onKeyUp event handler attached to the anchor tag (opener element) and how it interacts with the modal close button. Investigate whether adding event.stopPropagation() or checking the event target in the handler can prevent the modal from reopening after closing. Also review the modal's focus management logic to ensure focus returns to the opener element correctly. Look for any existing comments or maintainer suggestions in the issue thread.