Nested overlays don't working properly

[jbyoon99]

Issue Description:

The close method does not work correctly when two overlays are overlapped.

Example:

Except Styling Code

In this situation, to open the first overlay and close it, you rely on the return value of the second overlay.
(Frequent Case: Check 'Do you want to close?')
At this point, the second overlay is closed and the close function of the first overlay is executed correctly,
but again the isOpen value of the first overlay is true (see video)

import './App.css'
import { overlay } from 'overlay-kit'

function App() {
  return (
    <>
      <button
        onClick={() => {
          overlay.open(({ isOpen, close }) => {
            console.log('isOpen', isOpen);
            return isOpen ? (
              <FirstOverlay open={isOpen} onSubmit={() => {close()}} />
            ) : null
          })
        }}
      >
        Open First Overlay
      </button>
    </>
  )
}

function FirstOverlay({ open, onSubmit }: { open: boolean, onSubmit: () => void }) {
  if (!open) return null;

  const handleButtonClick = async () => {
    const isConfirmed = await SecondOverlay();
    if (isConfirmed) {
      onSubmit();
    }
  }

  return (
    <div className="overlay">
      <div className="overlay-content first-overlay">
        <h2>First Overlay</h2>
        <button onClick={handleButtonClick}>Open Second Overlay</button>
      </div>
    </div>
  )
}

async function SecondOverlay() {
  return new Promise<boolean>(resolve => {
    overlay.open(({ isOpen, close }) => {
      return isOpen ? (
        <div className="overlay">
          <div className="overlay-content inner-overlay">
            <h2>Second Overlay</h2>
            <button onClick={() => {close(); resolve(true)}}>Submit</button>
          </div>
        </div>
      ) : null
    })
  })
}

export default App

2025-02-05.10.55.10.mov

[jgjgill]

Hi, I think the behavior is independent for each overlay. 🙇‍♂️

So I think we need to change the structure so that the SecondOverlay can also receive the close generated when creating the first overlay.

In SecondOverlay, we could call the first close as well as the close generated by the second overlay.

Otherwise, I guess you could use the closeAll method.

oh I missed the onSubmit part... I gave you the wrong answer, sorry 😂 .

[jungpaeng]

Looking at the example code you provided, when the submit button in SecondOverlay is clicked, the onSubmit prop of FirstOverlay is executed, so the first overlay should also close.

2025-02-12.2.45.23.mov

Based on my testing, I was able to confirm that it actually closes. Could you let me know which version of overlay-kit you are using?

It would be even better if you could share a CodeSandbox link or a GitHub repository where the issue can be reproduced.