Fix popover open selector for focus group (#2002)

primer · May 11, 2023 · ef2540a · ef2540a
1 parent 52ba250
commit ef2540a
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 5 deletions.
diff --git a/.changeset/ten-avocados-watch.md b/.changeset/ten-avocados-watch.md
@@ -0,0 +1,5 @@
+---
+'@primer/view-components': patch
+---
+
+Fix focus groups when using native `popover`
diff --git a/app/components/primer/focus_group.ts b/app/components/primer/focus_group.ts
@@ -4,10 +4,10 @@ const menuItemSelector = '[role="menuitem"],[role="menuitemcheckbox"],[role="men
 
 const popoverSelector = (() => {
   try {
-    document.querySelector(':open')
-    return ':open'
+    document.querySelector(':popover-open')
+    return ':popover-open'
   } catch {
-    return '.\\:open'
+    return '.\\:popover-open'
   }
 })()
 
@@ -121,9 +121,8 @@ export default class FocusGroupElement extends HTMLElement {
           el = el.closest(`[popover]:not(${popoverSelector})`)
           if (el?.popover === 'auto') {
             el.showPopover()
-          } else {
-            el = el?.parentElement || null
           }
+          el = el?.parentElement || null
         } while (el)
       }
       focusEl?.focus()