@dodlhuat/basix 1.2.5 → 1.2.7

package/js/virtual-dropdown.ts

@@ -25,6 +25,9 @@ class VirtualDropdown {
     private readonly renderLimit: number;
     private readonly itemHeight: number;
     private readonly onSelect: ((selectedValues: Array<string | number>) => void) | null;
+    // Unique CSS anchor name for this instance — prevents conflicts when
+    // multiple dropdowns exist on the same page.
+    private readonly anchorName: string;
 
     private trigger!: HTMLElement;
     private triggerText!: HTMLElement;
@@ -59,6 +62,7 @@ class VirtualDropdown {
         this.renderLimit = config.renderLimit || 20;
         this.itemHeight = config.itemHeight || 40;
         this.onSelect = config.onSelect ?? null;
+        this.anchorName = `--vd-${Math.random().toString(36).slice(2, 9)}`;
 
         this.selectedValues = new Set();
         this.filteredOptions = [...this.options];
@@ -82,7 +86,7 @@ class VirtualDropdown {
         <span class="trigger-text">${escapeHtml(this.placeholder)}</span>
         <span class="trigger-arrow" aria-hidden="true">▼</span>
       </div>
-      <div class="dropdown-menu" role="listbox">
+      <div class="dropdown-menu" popover="manual" role="listbox">
         ${this.searchable ? '<div class="dropdown-search"><input type="text" placeholder="Search..." aria-label="Search options"></div>' : ''}
         <div class="dropdown-list-wrapper">
           <div class="dropdown-list-scroller">
@@ -101,6 +105,11 @@ class VirtualDropdown {
         this.spacer = this.querySelector('.virtual-spacer');
         this.content = this.querySelector('.virtual-content');
 
+        // Wire up anchor positioning: each instance gets a unique anchor name
+        // so multiple dropdowns on the same page don't interfere.
+        this.trigger.style.setProperty('anchor-name', this.anchorName);
+        this.menu.style.setProperty('position-anchor', this.anchorName);
+
         if (this.searchable) {
             this.searchInput = this.querySelector('.dropdown-search input');
         }
@@ -130,8 +139,10 @@ class VirtualDropdown {
         this.trigger.addEventListener('keydown', handleTriggerKeydown as EventListener);
         this.boundHandlers.set('triggerKeydown', handleTriggerKeydown as EventListener);
 
+        // Close when clicking outside. Still needed because popover="manual"
+        // does not auto-dismiss on outside clicks.
         const handleDocumentClick = (e: MouseEvent): void => {
-            if (!this.container.contains(e.target as Node)) {
+            if (!this.container.contains(e.target as Node) && !this.menu.contains(e.target as Node)) {
                 this.close();
             }
         };
@@ -154,6 +165,20 @@ class VirtualDropdown {
         };
         this.listWrapper.addEventListener('scroll', handleScroll);
         this.boundHandlers.set('scroll', handleScroll);
+
+        // Sync isOpen if the browser closes the popover externally (e.g. another
+        // popover="auto" element stealing focus — not typical for "manual" but
+        // good defensive practice).
+        const handlePopoverToggle = (e: Event): void => {
+            const te = e as ToggleEvent;
+            if (te.newState === 'closed' && this.isOpen) {
+                this.isOpen = false;
+                this.container.classList.remove('open');
+                this.trigger.setAttribute('aria-expanded', 'false');
+            }
+        };
+        this.menu.addEventListener('toggle', handlePopoverToggle);
+        this.boundHandlers.set('popoverToggle', handlePopoverToggle);
     }
 
     private toggle(): void {
@@ -163,7 +188,7 @@ class VirtualDropdown {
     private open(): void {
         this.isOpen = true;
         this.container.classList.add('open');
-        this.menu.classList.add('open');
+        this.menu.showPopover();
         this.trigger.setAttribute('aria-expanded', 'true');
         this.renderList();
 
@@ -175,7 +200,7 @@ class VirtualDropdown {
     private close(): void {
         this.isOpen = false;
         this.container.classList.remove('open');
-        this.menu.classList.remove('open');
+        this.menu.hidePopover();
         this.trigger.setAttribute('aria-expanded', 'false');
     }
 
@@ -327,6 +352,10 @@ class VirtualDropdown {
     }
 
     public destroy(): void {
+        if (this.isOpen) {
+            this.menu.hidePopover();
+        }
+
         const triggerClick = this.boundHandlers.get('triggerClick');
         if (triggerClick) {
             this.trigger.removeEventListener('click', triggerClick);
@@ -352,6 +381,11 @@ class VirtualDropdown {
             this.listWrapper.removeEventListener('scroll', scroll);
         }
 
+        const popoverToggle = this.boundHandlers.get('popoverToggle');
+        if (popoverToggle) {
+            this.menu.removeEventListener('toggle', popoverToggle);
+        }
+
         this.boundHandlers.clear();
 
         this.container.innerHTML = '';
@@ -359,4 +393,4 @@ class VirtualDropdown {
     }
 }
 
-export { VirtualDropdown, DropdownOption, VirtualDropdownConfig };
+export { VirtualDropdown, DropdownOption, VirtualDropdownConfig };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dodlhuat/basix",
-  "version": "1.2.5",
+  "version": "1.2.7",
   "description": "Basix is intended as a starter for the rapid development of a design. Each design element can be added individually to include only the data required. It is using plain javascript / typescript and therefore is not dependent on any plugin.",
   "exports": {
     "./css/*": "./css/*",