Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix actionmenu focus #2138

Closed
wants to merge 3 commits into from
Closed

Fix actionmenu focus #2138

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
07e6a2b
close actionmenu when it loses focus
keithamus Jul 11, 2023
1637e3a
Create healthy-wasps-help.md
jonrohan Jul 17, 2023
f5590e7
Merge branch 'main' into fix-actionmenu-focus
keithamus Sep 5, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions .changeset/healthy-wasps-help.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
---
'@primer/view-components': patch
---

Fix bug where ActionMenu does not collapse menu when focusing out.

<!-- Changed components: Primer::Alpha::ActionMenu -->
13 changes: 13 additions & 0 deletions app/components/primer/alpha/action_menu/action_menu_element.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -146,6 +146,19 @@ export class ActionMenuElement extends HTMLElement {
}
}

if (
this.popoverElement?.matches(':popover-open') &&
event.type === 'focusout' &&
!this.contains((event as FocusEvent).relatedTarget as Node)
) {
requestAnimationFrame(() => {
const active = document.activeElement as HTMLElement | null
this.popoverElement?.hidePopover()
active?.focus()
})
return
}

if (!this.popoverElement?.matches(':popover-open')) return

if (event.type === 'include-fragment-replaced') {
Expand Down
17 changes: 17 additions & 0 deletions test/system/alpha/action_menu_test.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -170,6 +170,23 @@ def test_opens_dialog_on_keydown
assert_selector "modal-dialog#my-dialog"
end

def test_shifting_focus_closes_menu
visit_preview(:two_menus)

page.evaluate_script(<<~JS)
document.querySelectorAll('action-menu button[aria-controls]')[0].focus()
JS

page.driver.browser.keyboard.type(:enter)
assert_selector "menu-1-overlay:popover-open"

page.evaluate_script(<<~JS)
document.querySelectorAll('action-menu button[aria-controls]')[1].focus()
JS
assert_selector "menu-1-overlay:not(:popover-open)"
refuse_selector "menu-1-overlay:popover-open"
end

def test_single_select_form_submission
visit_preview(:single_select_form, route_format: :json)

Expand Down
Loading