@truenas/ui-components 0.3.15 → 0.3.16

package/fesm2022/truenas-ui-components.mjs

@@ -8865,7 +8865,6 @@ class TnSelectComponent {
     }
     onChange = (_value) => { };
     onTouched = () => { };
-    elementRef = inject(ElementRef);
     cdr = inject(ChangeDetectorRef);
     overlay = inject(Overlay);
     viewContainerRef = inject(ViewContainerRef);
@@ -8937,11 +8936,19 @@ class TnSelectComponent {
      *
      * Why an overlay (vs. an inline absolutely-positioned panel):
      *   - Escapes parent `overflow: hidden`/clipping in surrounding layouts.
-     *   - `outsidePointerEvents()` notifies on outside pointerdown WITHOUT
-     *     intercepting the click (no backdrop) — so the user's click reaches
-     *     the underlying target while the select closes silently.
      *   - Position is recomputed on scroll so the panel stays attached.
-     *   - Width is matched to the trigger so the panel doesn't jump in size.
+     *
+     * Dismissal uses a transparent, full-viewport backdrop (`backdropClick()`).
+     * We previously ran backdrop-less with `outsidePointerEvents()`, but that
+     * only closes when the click lands strictly OUTSIDE the overlay pane — and
+     * the pane was sized to the (often full-width) trigger while the panel itself
+     * is only as wide as its content. The empty pane area to the right of the
+     * options stayed `pointer-events: auto`, so clicks there never counted as
+     * "outside" and the dropdown wouldn't close. A transparent backdrop closes on
+     * ANY click outside the panel regardless of pane geometry — the standard
+     * pattern used by native `<select>` and Material's `mat-select`. We therefore
+     * also drop the explicit `width`: the pane sizes to the panel content so the
+     * clickable surface matches what the user sees.
      */
     attachOverlay() {
         const trigger = this.triggerEl().nativeElement;
@@ -8955,25 +8962,17 @@ class TnSelectComponent {
         this.overlayRef = this.overlay.create({
             positionStrategy,
             scrollStrategy: this.overlay.scrollStrategies.reposition(),
-            hasBackdrop: false,
-            width: trigger.offsetWidth,
+            hasBackdrop: true,
+            backdropClass: 'cdk-overlay-transparent-backdrop',
         });
         const portal = new TemplatePortal(this.dropdownTemplate(), this.viewContainerRef);
         this.overlayRef.attach(portal);
-        // Click-outside (non-intercepting). The pointer event still reaches the
-        // element the user clicked; we just notice and close.
-        //
-        // Important: ignore events whose target is inside the select host. A
-        // pointerdown on the trigger is "outside the overlay" from CDK's POV but
-        // it's our own toggle target — letting closeDropdown fire here races the
-        // trigger's click handler and the dropdown immediately reopens.
-        this.overlaySubs.push(this.overlayRef.outsidePointerEvents().subscribe((event) => {
-            const target = event.target;
-            if (target && this.elementRef.nativeElement.contains(target)) {
-                return;
-            }
-            this.closeDropdown(false);
-        }));
+        // Dismiss on any click outside the panel. The transparent backdrop spans
+        // the viewport and captures the click, so this fires no matter where the
+        // user clicks (including the empty area beside a narrow panel). Clicking
+        // the trigger while open also hits the backdrop — it closes here and the
+        // trigger's own click never fires, so there's no reopen race.
+        this.overlaySubs.push(this.overlayRef.backdropClick().subscribe(() => this.closeDropdown(false)));
         // Escape as a fallback (the trigger keydown handler covers the common case,
         // but if focus ever moves into the panel, this catches it too).
         this.overlaySubs.push(this.overlayRef.keydownEvents().subscribe((event) => {