fix(#1511): fix click outside popover

GovAlta · Jan 11, 2025 · e171566 · e171566
1 parent 4f1b3d5
commit e171566
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 34 deletions.
diff --git a/libs/web-components/src/components/dropdown/Dropdown.svelte b/libs/web-components/src/components/dropdown/Dropdown.svelte
@@ -749,9 +749,11 @@
             data-value={option.value}
             role="option"
             style="display: block"
-            on:click={() => {
+            on:click={(e) => {
               _isDirty = true;
               onSelect(option);
+              _inputEl?.focus();
+              e.stopPropagation();
             }}
           >
             {option.label || option.value}

diff --git a/libs/web-components/src/components/popover/Popover.svelte b/libs/web-components/src/components/popover/Popover.svelte
@@ -106,7 +106,7 @@
   });
 
   function handleFocusOut(e: FocusEvent) {
-    if (!_focusTrapEl) return;
+    if (_disabled || !_open) return;
 
     const activeElement = e.relatedTarget;
     const isFocusInPopover =
@@ -151,26 +151,25 @@
 
   // Opens the popover and adds the required binding to the new slot element
   function openPopover() {
-    if (_disabled) return;
+    if (_disabled || _open) return;
 
+    _open = true;
+    _focusTrapEl.addEventListener("keydown", onFocusTrapEvent, true);
+    _rootEl.dispatchEvent(new CustomEvent("_open", { composed: true }));
     _initFocusedEl.focus();
-    (async () => {
-      _open = true;
-      await tick();
-      _focusTrapEl.addEventListener("keydown", onFocusTrapEvent, true);
-      _rootEl.dispatchEvent(new CustomEvent("_open", { composed: true }));
-      makeContentFocusable();
-    })();
+    makeContentFocusable();
   }
 
   // Ensures that upon closing of the popover that the element that triggered
   // the popover to be shown re-attains focus and that any window event binding
   // is removed (it may not have been added if target was clicked)
   function closePopover() {
-    _initFocusedEl.focus();
+    if (_disabled || !_open) return;
+
     _open = false;
     window.removeEventListener("popstate", handleUrlChange, true);
     _rootEl.dispatchEvent(new CustomEvent("_close", { composed: true }));
+    _initFocusedEl.focus({ preventScroll: true });
   }
 
   // Ensures that all immediate children of the popover content are included
@@ -282,29 +281,30 @@
     <slot name="target" />
   </div>
 
-  {#if _open}
-    <div class="popover-container">
-      <section
-        bind:clientHeight={_sectionHeight}
-        bind:this={_popoverEl}
-        data-testid="popover-content"
-        tabindex="-1"
-        class="popover-content"
-        style={styles(
-          style("width", width),
-          style("min-width", minwidth),
-          style("max-width", width ? `max(${width}, ${maxwidth})` : maxwidth),
-          style("padding", _padded ? "var(--goa-space-m)" : "0"),
-        )}
-      >
-        <goa-focus-trap open="true">
-          <div bind:this={_focusTrapEl}>
-            <slot />
-          </div>
-        </goa-focus-trap>
-      </section>
-    </div>
-  {/if}
+  <div
+    class="popover-container"
+    style={!_open && styles(style("display", "none"))}
+  >
+    <section
+      bind:clientHeight={_sectionHeight}
+      bind:this={_popoverEl}
+      data-testid="popover-content"
+      tabindex="-1"
+      class="popover-content"
+      style={styles(
+        style("width", width),
+        style("min-width", minwidth),
+        style("max-width", width ? `max(${width}, ${maxwidth})` : maxwidth),
+        style("padding", _padded ? "var(--goa-space-m)" : "0"),
+      )}
+    >
+      <goa-focus-trap open="true">
+        <div bind:this={_focusTrapEl}>
+          <slot />
+        </div>
+      </goa-focus-trap>
+    </section>
+  </div>
 </div>
 
 <!-- Style -->