Bugs when close & unmount multiple overlays

[jbyoon99]

Issue Description:

There is an error in the example below of docs.
After closing the overlay using the close method,
If you open a new overlay and close the overlay using the unmount method,
the overlay that you opened with the close method will reopen.

Example:

Video

2025-02-05.6.12.28.mov

Code

function App() {

  return (
    <>
      <button
        onClick={() => {
          overlay.open(
            ({ isOpen, close }) => {
              return isOpen ? <button onClick={close}>CloseOverlay</button> : null;
            },
          );
        }}
      >
        close로 오버레이 닫는 overlay
      </button>
      <button
        onClick={() => {
          overlay.open(
            ({ isOpen, unmount }) => {
              return isOpen ? <button onClick={unmount}>UnmountOverlay</button> : null;
            },
          );
        }}
      >
        unmount로 오버레이 닫는 Overlay
      </button>
    </>
  );
}

[jgjgill]

I was curious about this issue too, so I tried to find out what was causing it. 🧐
I'll share what I found. 🙇‍♂️

Problem situation

As you said, the problem is that we only use close on other overlays,
and only unmount on the overlay in question.

In this comment, I'm going to talk about the following flow.

open `modal with close` -> close `modal with close` -> open `modal with unmount` -> unmount `modal with unmount`

Problem with logic related to current in remove event

I needed to look at the current configuration inside remove.
I'll compare the following 3 situations.

• The current situation when only close is used
• The current situation when only unmount is used
• The current situation when close and unmount are configured

close

You can see that current becomes null as it should.

close.current.mov

unmount

Again, current is normally configured to be null.

unmount.current.mov

close and unmount

When closing the unmount overlay, current is configured with the previous overlay ID, close-modal-id.

The following code is causing the overlay of close-modal to fire an open event.

overlay-kit/packages/src/context/provider/content-overlay-controller.tsx

Lines 42 to 48 in 9945f49

	if (prevCurrent.current !== current) {
	prevCurrent.current = current;
	if (current === overlayId) {
	onMountedRef.current();
	}
	}

close.unmount.current.mov

Is it necessary to have different current logic in close and remove?

When I thought about the problem, I realized that the current in close is configured correctly.

The logic current in the close event is as follows.

overlay-kit/packages/src/context/reducer.ts

Lines 47 to 65 in 9945f49

	const openedOverlayOrderList = state.overlayOrderList.filter(
	(orderedOverlayId) => state.overlayData[orderedOverlayId].isOpen === true
	);
	const targetIndexInOpenedList = openedOverlayOrderList.findIndex((item) => item === action.overlayId);
	/**
	* @description If closing the last overlay, specify the overlay before it.
	* @description If closing intermediate overlays, specifies the last overlay.
	*
	* @example open - [1, 2, 3, 4]
	* close 2 => current: 4
	* close 4 => current: 3
	* close 3 => current: 1
	* close 1 => current: null
	*/
	const currentOverlayId =
	targetIndexInOpenedList === openedOverlayOrderList.length - 1
	? openedOverlayOrderList[targetIndexInOpenedList - 1] ?? null
	: openedOverlayOrderList.at(-1) ?? null;

When I saw that code, I wondered if I could replace the close part with unmount and use it as is.

/**
 * @description If unmounting the last overlay, specify the overlay before it.
 * @description If unmounting intermediate overlays, specifies the last overlay.
 *
 * @example open - [1, 2, 3, 4]
 * unmount 2 => current: 4
 * unmount 4 => current: 3
 * unmount 3 => current: 1
 * unmount 1 => current: null
 */

close.current.unmount.mov

Test branch related to the issue

If you find anything wrong, please feel free to comment. 🙇‍♂️