Baike.dev
Log in
Back to tool/Back to issues
#1241·blinko

Note detail overlay (z-[9999]) blocks reference modals & dnd-kit crash

Author: apploCreated Sep 8, 2026Updated Sep 8, 2026

Describe the bug

When opening a note in the full-screen detail view, clicking the Reference button does not show the reference modal.

The modal DOM elements are mounted and API requests succeed, but the modal is completely invisible because it is rendered underneath the detail view due to a stacking context / z-index conflict. Additionally, a TypeError: Cannot use 'in' operator to search for 'x' in undefined crash occasionally occurs in dnd-kit during modal mounting.

To Reproduce

  1. Open any long note to enter the full-screen detail view.
  2. Click on the Reference note.
  3. Observe that no dialog/modal appears on the screen (it is trapped behind the detail page backdrop).
  4. (Optional) Check the DevTools console; in some states, a dnd-kit coordinate calculation error (Cannot use 'in' operator to search for 'x' in undefined) is thrown.
  5. If you trigger a window resize or adjust styles via console, the modal is found rendered behind the detail overlay.

Expected behavior

The reference note should pop up on the topmost layer above the note detail page, allowing users to select.

Screenshots

If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

  • OS: Macos Sonoma 14.7.6
  • Browser Edge
  • Version 152.0.4191.62

Additional context

We investigated the root causes and verified the fix locally:

  1. Root Cause Analysis (z-index mismatch):

    • The note detail overlay uses the Tailwind class: fixed inset-0 z-[9999] bg-background overflow-hidden (computed z-index: 9999).
    • The HeroUI modal portal wrapper is attached to <body> with: flex w-screen fixed inset-0 z-50 overflow-x-auto justify-center (computed z-index: 50).
    • Even though the inner <section> of the modal has z-index: 2000, because its parent wrapper only has z-index: 50, the entire modal stacking context is placed behind the detail page overlay (z-index: 9999).

  2. dnd-kit crash:

    • In dnd-kit's coordinate delta helper function (ft(e, t) in the bundle), passing an undefined coordinate during initial mount throws Cannot use 'in' operator to search for 'x' in undefined. A defensive null check if (!e || !t) return false; resolves this.

  3. Suggested Fix:

    • Change the detail view overlay from z-[9999] to z-40 or standard backdrop elevation so it stays below modals (z-50).
    • Alternatively, elevate the modal wrapper/portal container z-index to higher than 9999 (e.g. z-[10000]).
    • Add null checks for drag-and-drop coordinate handlers.

Source: blinkospace/blinko

View original on GitHubView discussion on GitHub