fix(devtools): keep openAsModal on top of later dialogs and release removed ones

Two cases left the devtools or the page stuck:

- The app opened another modal dialog while the panel was on top. That dialog
  became the topmost modal and the devtools were inert behind it. The host is
  now shown again when an app dialog opens after it.
- The app removed an open dialog without close(), for example on unmount.
  That is a child list change, which the observer did not watch, so the host
  stayed modal and the page stayed inert. The observer now watches child
  list changes too.

Author: AlemTuzlak

e2e/apps/react-vite/tests/open-as-modal.spec.ts

@@ -73,6 +73,46 @@ test.describe('openAsModal', () => {
     ).toHaveCount(0)
   })
 
+  test('stays on top when the app opens another modal dialog', async ({
+    page,
+  }) => {
+    const dt = new DevtoolsPage(page)
+    await dt.goto('/?open-as-modal')
+    await expect(dt.trigger()).toBeVisible()
+    await page.getByTestId('open-app-dialog').click()
+    await pressOpenHotkey(page)
+    await dt.expectOpen()
+
+    await page.evaluate(() => {
+      const second = document.createElement('dialog')
+      second.textContent = 'second app dialog'
+      document.body.append(second)
+      second.showModal()
+    })
+
+    await expect.poll(() => closeButtonTakesClicks(page)).toBe(true)
+  })
+
+  test('releases the page when an open app dialog is removed', async ({
+    page,
+  }) => {
+    const dt = new DevtoolsPage(page)
+    await dt.goto('/?open-as-modal')
+    await expect(dt.trigger()).toBeVisible()
+    await page.getByTestId('open-app-dialog').click()
+    await pressOpenHotkey(page)
+    await dt.expectOpen()
+
+    // Removed without close(), as when a component unmounts.
+    await page.evaluate(() => document.querySelector('#app-dialog')!.remove())
+
+    await expect(
+      page.locator('dialog [data-testid="tanstack_devtools"]'),
+    ).toHaveCount(0)
+    await expect(page.getByTestId('text-input')).toBeEditable()
+    await page.getByTestId('text-input').fill('works')
+  })
+
   test('without the option, a modal app dialog blocks the panel', async ({
     page,
   }) => {

packages/devtools/src/hooks/use-modal-host.ts

@@ -39,10 +39,12 @@ export function createModalHost(
     let home: Node | null = null
 
     const sync = () => {
-      const appModalOpen = Array.from(doc.querySelectorAll('dialog')).some(
-        (dialog) => dialog !== host && dialog.matches(':modal'),
-      )
-      if (isOpen() && appModalOpen) {
+      const wanted =
+        isOpen() &&
+        Array.from(doc.querySelectorAll('dialog')).some(
+          (dialog) => dialog !== host && dialog.matches(':modal'),
+        )
+      if (wanted) {
         if (host.open) return
         home = element.parentNode
         host.append(element)
@@ -55,10 +57,27 @@ export function createModalHost(
       }
     }
 
-    // `showModal()` and `close()` toggle the `open` attribute.
-    const observer = new MutationObserver(sync)
+    // `showModal()` and `close()` toggle the `open` attribute. Removing an open
+    // dialog from the page is a child list change instead.
+    const observer = new MutationObserver((records) => {
+      // An app dialog shown after the host goes on top of it. Showing the host
+      // again puts the host back on top.
+      const appModalShown = records.some(
+        (record) =>
+          record.type === 'attributes' &&
+          record.target !== host &&
+          (record.target as Element).matches('dialog:modal'),
+      )
+      if (host.open && appModalShown) {
+        host.close()
+        host.showModal()
+        return
+      }
+      sync()
+    })
     observer.observe(doc.documentElement, {
       subtree: true,
+      childList: true,
       attributeFilter: ['open'],
     })
     createEffect(() => {