@lavalogic/scoria 0.37.32 → 0.37.33

package/dist/Helpers/dropdownPortal.js

@@ -90,8 +90,6 @@ export function attachDropdownPortal(options) {
             /* nothing wired up */
         };
     }
-    let originalParent = null;
-    let originalNextSibling = null;
     let isPortalled = false;
     const reposition = () => {
         if (!isPortalled) {
@@ -140,68 +138,36 @@ export function attachDropdownPortal(options) {
     const handleResize = () => {
         throttled.schedule();
     };
-    /**
-     * Direct mousedown listener attached to the portaled dropdown that
-     * calls `preventDefault()` to keep focus on the Svelecte input while
-     * the user clicks an option.
-     *
-     * Svelecte already attaches `onmousedown={preventDefault}` to the
-     * `.sv_dropdown` element in template, but Svelte 5 wires inline
-     * event handlers through its delegated-event chain rooted at the
-     * original mount point. Once we `appendChild` the dropdown to
-     * `document.body` (or to a `<dialog>` ancestor) the delegated chain
-     * no longer finds this element, the inline handler never fires,
-     * the browser's default mousedown shifts focus to the option (or to
-     * `body`), Svelecte's `on_blur` runs `updateDropdownState(false)`
-     * which closes the dropdown, this helper's MutationObserver moves
-     * the dropdown back into place, and the `mouseup` / `click` events
-     * never reach an option element. The visible symptom: keyboard
-     * selection (Enter) works, mouse click does not.
-     *
-     * Adding a *direct* `addEventListener` on the dropdown bypasses
-     * Svelte's delegation entirely. The listener is reset every
-     * `portalOut` / `portalIn` cycle.
-     */
-    const preventFocusShiftOnMousedown = (e) => {
-        // Same intent as Svelecte's own `on_mouse_down`. Keep focus on
-        // the input so `on_blur` does not collapse the dropdown before
-        // the click event reaches its selection handler.
-        e.preventDefault();
-    };
     const portalOut = () => {
         if (isPortalled) {
             return;
         }
-        originalParent = dropdown.parentNode;
-        originalNextSibling = dropdown.nextSibling;
-        // Clear any `display: none` left over from a previous portalIn
-        // (see the defensive hide there) so the dropdown is visible
-        // once teleported into the new host.
+        // PREVIOUSLY: this helper moved the dropdown to `document.body`
+        // (or to the open `<dialog>` ancestor) via `appendChild` so it
+        // would escape ancestor `overflow: hidden` / `z-index` clipping.
+        // That hop broke Svelte 5's per-component event delegation:
+        // inline `onmousedown` / `onclick` handlers in Svelecte's
+        // template (specifically the `.sv_dropdown` element) are wired
+        // through a delegated dispatch rooted at the component's
+        // original mount point, and the dispatch's parent-chain walk
+        // never reaches the moved element. The visible symptom: mouse
+        // clicks on dropdown options did not select (keyboard Enter
+        // did, because that path bypasses the dropdown's click
+        // handler).
+        //
+        // We now leave the dropdown in its original DOM location and
+        // only flip it to `position: fixed`. `position: fixed` escapes
+        // ancestor `overflow` clipping (the original motivation for
+        // portaling) without removing the element from its component
+        // tree, so Svelte's delegated dispatch continues to find it.
+        // The reposition logic below tracks the trigger via
+        // `getBoundingClientRect` exactly as before.
         dropdown.style.display = '';
-        // Append the dropdown to the nearest open native `<dialog>` ancestor
-        // when one exists, otherwise to `document.body`. A `<dialog>` opened
-        // via `showModal()` renders in the browser's top layer, which sits
-        // above every z-indexed element in the regular stacking context.
-        // Without this hop the dropdown's `z-index: 10000` was still painted
-        // behind the dialog backdrop and its content (the symptom that
-        // surfaced as "select options disappear behind the allocate modal").
-        const dialogHost = trigger.closest('dialog');
-        const portalTarget = dialogHost && dialogHost.open ? dialogHost : document.body;
-        portalTarget.appendChild(dropdown);
-        // Tag the teleported dropdown so any "click outside the
-        // panel" / "click outside the trigger" handler elsewhere in
-        // the codebase can recognise the dropdown as a logical
-        // extension of its trigger and ignore clicks landing inside
-        // it. The `TableSidebar` side-panel uses this marker (along
-        // with `closest('.sv_dropdown')`) so clicking an option in a
-        // teleported filter-row dropdown does not close the
-        // side-panel under it. Components that want to ignore
-        // portal clicks should check
-        // `el.closest('[data-scoria-portal-dropdown]')`.
+        // Marker preserved for any consumer that still uses it (e.g.
+        // the TableSidebar "click-outside" handler). The dropdown is
+        // no longer literally portaled, but the marker means "treat
+        // clicks landing here as part of the trigger".
         dropdown.setAttribute('data-scoria-portal-dropdown', '');
-        // Restore the focus-preserving mousedown handler that Svelte's
-        // delegated event chain no longer reaches after the move.
-        dropdown.addEventListener('mousedown', preventFocusShiftOnMousedown);
         isPortalled = true;
         // First-frame measurement: lay out, then reposition again on
         // the next frame so we measure the dropdown's real
@@ -220,7 +186,6 @@ export function attachDropdownPortal(options) {
             return;
         }
         throttled.cancel();
-        dropdown.removeEventListener('mousedown', preventFocusShiftOnMousedown);
         window.removeEventListener('scroll', handleScroll, { capture: true });
         window.removeEventListener('resize', handleResize);
         // Strip the inline overrides so Svelecte's next open starts
@@ -240,24 +205,14 @@ export function attachDropdownPortal(options) {
         // `display: none` (e.g. on certain transition-cancel race paths
         // the open/close class flip and the inline style update arrive
         // out of order), the dropdown would now be `position: static;
-        // display: block` in `document.body` and contribute its option
-        // list's height to the body scroll size - which is what surfaces
-        // as a stray page-level vertical scrollbar after toggling a
-        // select. Force `display: none` here; Svelecte will restore the
-        // inline style on next open via its own class-driven render.
+        // display: block` and contribute its option list's height to
+        // the page scroll size, which is what surfaces as a stray
+        // page-level vertical scrollbar after toggling a select. Force
+        // `display: none` here; Svelecte will restore the inline style
+        // on next open via its own class-driven render.
         if (!dropdown.classList.contains('is-open')) {
             dropdown.style.display = 'none';
         }
-        if (originalParent != null) {
-            if (originalNextSibling != null && originalNextSibling.parentNode === originalParent) {
-                originalParent.insertBefore(dropdown, originalNextSibling);
-            }
-            else {
-                originalParent.appendChild(dropdown);
-            }
-        }
-        originalParent = null;
-        originalNextSibling = null;
         isPortalled = false;
     };
     // Apply / unapply the portal whenever Svelecte toggles the

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lavalogic/scoria",
   "description": "Svelte components used for the FloWMS Web Frontend",
-  "version": "0.37.32",
+  "version": "0.37.33",
   "publishConfig": {
     "access": "restricted"
   },