Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Nested modals shift+tab focuses items of the underlying modal #1497

Closed
krnlde opened this issue May 21, 2019 · 2 comments · Fixed by #1941, #2054 or DDDEastMidlandsLimited/dddem-web#239
Closed

Nested modals shift+tab focuses items of the underlying modal #1497

krnlde opened this issue May 21, 2019 · 2 comments · Fixed by #1941, #2054 or DDDEastMidlandsLimited/dddem-web#239

Comments

@krnlde
Copy link
Contributor

krnlde commented May 21, 2019

  • components: modal
  • reactstrap version #8.0.0
  • import method es
  • react version #16.8.6
  • bootstrap version #4.3.1

What is happening?

As seen in the Nested Modals example of the documentation, if you open the nested modal tab into the focusable items ("Done" and "All Done") and then shift+tab back items of the previous modal are focused.

What should be happening?

When pressing shift+tab the previously focused item should be focused.

Steps to reproduce issue

  1. Go to the Modals page
  2. Find the "Nested Modals" example
  3. Open the example modal
  4. Open its nested modal
  5. Press tab twice to focus the "All Done" button
  6. Press shift+tab to focus the "Done" button
  7. The "Cancel" button of the underlying modal will be focused
@watinha
Copy link
Contributor

watinha commented Jul 19, 2020

Duplicate of #1679?

@krnlde
Copy link
Contributor Author

krnlde commented Jul 28, 2020

Yes it is. But... but I was first :D

watinha added a commit to watinha/reactstrap that referenced this issue Jul 29, 2020
@watinha
Modal: Trap focus on opened component (FIX reactstrap#1497 and FIX re…
d0911ef 
…actstrap#1679)
@watinha watinha mentioned this issue Jul 29, 2020
Closed
12 tasks
watinha added a commit to watinha/reactstrap that referenced this issue Aug 5, 2020
@watinha
Modal: Trap focus on opened component (FIX reactstrap#1497 and FIX re…
d7d9f7a 
…actstrap#1679)
@kyletsang kyletsang linked a pull request Dec 22, 2020 that will close this issue
Modal: Trap focus on opened component (FIX #1497 and FIX #1679) #1941
Merged
12 tasks
kyletsang added a commit that referenced this issue Dec 23, 2020
@watinha @kyletsang
fix(Modal): Trap focus on opened modal (#1941)
bf46484 
* Modal: Trap focus on opened component (FIX #1497 and FIX #1679)

* fix shift+tab focus navigation controls on nested modal

* Changes this.modalCount(1-based) -> this.modalIndex(0-based index), to improve readability

* Sets tabstop=2 and includes comments for trapFocus function.

* add/remove focus listener with correct signatures (using the capture flag)

Co-authored-by: Kyle Tsang <6854874+kyletsang@users.noreply.github.com>
@kyletsang kyletsang mentioned this issue Dec 23, 2020
Merged
@dependabot dependabot bot mentioned this issue Mar 13, 2021
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
2 participants
@watinha @krnlde