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

#954 opened on Jun 18, 2022

View on GitHub
 (12 comments) (0 reactions) (0 assignees)JavaScript (7,294 stars) (828 forks)batch import
discussioneventshelp wantedmaybe bugneeds info

Description

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.

Contributor guide

Tech stack
javascriptreact
Domain
frontendaccessibility
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
active
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
Basic React knowledgeUnderstanding of event propagation
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
70
Research direction
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.