react-focus-lock icon indicating copy to clipboard operation
react-focus-lock copied to clipboard

Published 20 hours ago • verified publisher icon theKashey

Multiple modals

Open Joozty opened this issue 5 years ago • 2 comments
trafficstars

First of all thanks for a great library. I have a use case where I need to render nested modals side by side. The pseudo output looks like this:

<body>
  <react-app-root />
  <modal-root >
      <modal1 >
      <modal2 >
  </modal-root >
</body>

Both modals are wrapped with FocusLock. When I open modal 2 within modal 1 then focus is correctly transferred to modal 2. Similarly when I close modal 2 and go back to modal 1. Focus is restored.

The problem happens when I close both modals at the same time. The focus is not returned back to the open button.

Steps to reproduce:

  1. Open sandbox
  2. Click show modal
  3. Within the modal click on show modal 2
  4. Within the modal 2 click on close all
  5. As you can see the focus is not returned to the initial button

This bug report is possibly related or it's a duplicate of https://github.com/theKashey/react-focus-lock/issues/68

Joozty avatar Oct 14 '20 12:10 Joozty

In this example (using v2.4.1) you can get focus returned to the initial show modal button if you update the code to use a setTimeout like this:

<button
  id="close-all-modals"
  onClick={() => {
    setModal2Active(false);
    setTimeout(() => setModal1Active(false), 0);
  }}
>
  close all modals (return focus back to show modal button)
</button>

I logged a possibly related issue

mikekiska avatar Jan 14 '22 22:01 mikekiska

completely missed this issue. My bad.

A very interesting case. At single point of time only one modal is active and only one modal can "return focus". And this logic "breaks the chain" is multiple modals are closed at one point of time.

Easy to write a test for this case. And if one have a test - then it's easy to create a patch.

theKashey avatar Jan 16 '22 23:01 theKashey

This issue has been marked as "stale" because there has been no activity for 2 months. If you have any new information or would like to continue the discussion, please feel free to do so. If this issue got buried among other tasks, maybe this message will reignite the conversation. Otherwise, this issue will be closed in 7 days. Thank you for your contributions so far.

stale[bot] avatar Apr 30 '23 12:04 stale[bot]