fix(typeahead): elevate dropdown menu z-index when expanded (#49)

Fixes #47
metonym · Jul 5, 2022 · 8fee120 · 8fee120
1 parent 7be1e7c
commit 8fee120
Showing 1 changed file with 7 additions and 2 deletions.
diff --git a/src/Typeahead.svelte b/src/Typeahead.svelte
@@ -120,6 +120,7 @@
     .filter((result) => !filter(result.original))
     .map((result) => ({ ...result, disabled: disable(result.original) }));
   $: resultsId = results.map((result) => extract(result.original)).join("");
+  $: showResults = !hideDropdown && results.length > 0;
 </script>
 
 <svelte:window
@@ -137,7 +138,7 @@
   aria-haspopup="listbox"
   aria-owns="{id}-listbox"
   class:dropdown={results.length > 0}
-  aria-expanded={!hideDropdown && results.length > 0}
+  aria-expanded={showResults}
   id="{id}-typeahead"
 >
   <Search
@@ -197,7 +198,7 @@
     aria-labelledby="{id}-label"
     id="{id}-listbox"
   >
-    {#if !hideDropdown && results.length > 0}
+    {#if showResults}
       {#each results as result, index}
         <li
           role="option"
@@ -246,6 +247,10 @@
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
   }
 
+  [aria-expanded="true"] ul {
+    z-index: 1;
+  }
+
   li,
   .no-results {
     padding: 0.25rem 1rem;