🐛 Recalculate dropdown position on resize window (#1907)

Author: KATO-Hiro

src/lib/actions/handle_dropdown.ts

@@ -3,6 +3,10 @@ import { browser } from '$app/environment';
 
 const activeDropdownId: Writable<string | null> = writable<string | null>(null);
 
+let lastTriggerElement: HTMLElement | null = null;
+// Bounce timer for resizing event.
+let resizeTimeout: ReturnType<typeof setTimeout>;
+
 /**
  * A Svelte action that manages dropdown behavior for an HTML element.
  *
@@ -17,6 +21,7 @@ const activeDropdownId: Writable<string | null> = writable<string | null>(null);
  * @param options.isOpen - Boolean indicating if the dropdown is currently open
  * @param options.closeDropdown - Function to call when the dropdown should close
  * @param options.onStatusChange - Optional callback that fires when dropdown open state changes
+ * @param options.updatePosition - Optional function to update the dropdown position
  *
  * @returns An object containing update and destroy methods (Svelte action interface)
  * @returns.update - Method to update the dropdown options
@@ -39,6 +44,7 @@ export function handleDropdownBehavior(
     isOpen: boolean;
     closeDropdown: () => void;
     onStatusChange?: (status: boolean) => void;
+    updatePosition?: (x: number, y: number, isLower: boolean) => void;
   },
 ) {
   if (!browser) {
@@ -69,30 +75,53 @@ export function handleDropdownBehavior(
     }
   };
 
+  // Recalculate the dropdown position on resize.
+  const handleResize = () => {
+    if (options.isOpen) {
+      options.closeDropdown();
+    }
+
+    clearTimeout(resizeTimeout);
+
+    resizeTimeout = setTimeout(() => {
+      recalculateDropdownPosition({
+        updatePosition: options.updatePosition || (() => {}),
+        dropdownIsOpen: options.isOpen,
+      });
+    }, 100);
+  };
+
   // Close the dropdown if another one is opened.
   const unsubscribe = activeDropdownId.subscribe((id) => {
     if (id && id !== options.dropdownId && options.isOpen) {
       options.closeDropdown();
     }
   });
 
+  // Add event listeners.
   window.addEventListener('click', handleWindowClick);
   window.addEventListener('scroll', handleScroll, { passive: true });
+  window.addEventListener('resize', handleResize, { passive: true });
 
   return {
     update(newOptions: {
       dropdownId: string;
       isOpen: boolean;
       closeDropdown: () => void;
       onStatusChange?: (status: boolean) => void;
+      updatePosition?: (x: number, y: number, isLower: boolean) => void;
     }) {
       Object.assign(options, newOptions);
     },
 
     destroy() {
       if (browser) {
+        // Remove event listeners to prevent memory leaks.
         window.removeEventListener('scroll', handleScroll);
         window.removeEventListener('click', handleWindowClick);
+        window.removeEventListener('resize', handleResize);
+
+        clearTimeout(resizeTimeout);
         unsubscribe();
       }
     },
@@ -113,7 +142,8 @@ export function calculateDropdownPosition(event: MouseEvent): {
   y: number;
   isLower: boolean;
 } {
-  const rect = (event.currentTarget as HTMLElement).getBoundingClientRect();
+  lastTriggerElement = event.currentTarget as HTMLElement;
+  const rect = (lastTriggerElement as HTMLElement).getBoundingClientRect();
 
   return {
     x: rect.right,
@@ -122,6 +152,37 @@ export function calculateDropdownPosition(event: MouseEvent): {
   };
 }
 
+/**
+ * Recalculates the position of a dropdown menu relative to its trigger element.
+ *
+ * This function uses the position of the last trigger element to determine where
+ * the dropdown should be placed. It also determines whether the dropdown should
+ * appear above or below the trigger based on the trigger's position on the screen.
+ *
+ * @param options - Configuration options for positioning
+ * @param options.updatePosition - Callback function to update the dropdown position
+ * @param options.dropdownIsOpen - Boolean indicating if the dropdown is currently open
+ *
+ * @remarks
+ * This function depends on global variables `browser` and `lastTriggerElement`,
+ * and will do nothing if either is undefined or if the dropdown is not open.
+ *
+ * The dropdown will be positioned at the bottom-right corner of the trigger element.
+ * The `isLower` parameter passed to `updatePosition` will be true if the trigger is
+ * in the top half of the screen, suggesting the dropdown should expand downward.
+ */
+export function recalculateDropdownPosition(options: {
+  updatePosition: (x: number, y: number, isLower: boolean) => void;
+  dropdownIsOpen: boolean;
+}): void {
+  if (!browser || !lastTriggerElement || !options.dropdownIsOpen) {
+    return;
+  }
+
+  const rect = lastTriggerElement.getBoundingClientRect();
+  options.updatePosition(rect.right, rect.bottom, rect.top > window.innerHeight / 2);
+}
+
 /**
  * Toggles a dropdown menu's visibility state and manages its active status.
  *
@@ -151,6 +212,9 @@ export function toggleDropdown(
     event.preventDefault();
     event.stopPropagation();
 
+    // Save the last trigger element for position calculations.
+    lastTriggerElement = event.currentTarget as HTMLElement;
+
     if (options.getPosition) {
       options.getPosition(event);
     }

src/lib/components/SubmissionStatus/UpdatingDropdown.svelte

@@ -28,6 +28,7 @@
 <script lang="ts">
   import { getStores } from '$app/stores';
   import { enhance } from '$app/forms';
+  import { browser } from '$app/environment';
 
   import { Dropdown, DropdownUl, DropdownLi, uiHelpers } from 'svelte-5-ui-lib';
   import Check from 'lucide-svelte/icons/check';
@@ -84,7 +85,17 @@
 
   // Required for the dropdown to open at the correct position.
   function updateDropdownPosition(event: MouseEvent): void {
-    dropdownPosition = calculateDropdownPosition(event);
+    const position = calculateDropdownPosition(event);
+    updatePositionInComponent(position.x, position.y, position.isLower);
+  }
+
+  function updatePositionInComponent(x: number, y: number, isLower: boolean) {
+    dropdownPosition = { x, y, isLower };
+
+    if (browser) {
+      document.documentElement.style.setProperty('--dropdown-x', `${x}px`);
+      document.documentElement.style.setProperty('--dropdown-y', `${y}px`);
+    }
   }
 
   function getDropdownClasses(isLower: boolean): string {
@@ -219,6 +230,7 @@
     onStatusChange: (status: boolean) => {
       dropdownStatus = status;
     },
+    updatePosition: updatePositionInComponent,
   }}
 >
   <Dropdown