Skip to content

fix RSP-1859 Clicking Breadcrumb MenuItem within Popover in Documentation closes Popover#715

Merged
devongovett merged 2 commits intomasterfrom
RSP-1859
Jul 11, 2020
Merged

fix RSP-1859 Clicking Breadcrumb MenuItem within Popover in Documentation closes Popover#715
devongovett merged 2 commits intomasterfrom
RSP-1859

Conversation

@majornista
Copy link
Collaborator

Closes RSP-1859

✅ Pull Request Checklist:

  • Included link to corresponding RSP-1859.
  • Added/updated unit tests and storybook for this change (for new code or code which already has tests).
  • Filled out test instructions.
  • Updated documentation (if it already exists for this component).
  • Looked at the Accessibility Practices for this feature - Aria Practices

📝 Test Instructions:

Steps to reproduce:

  1. open docs site to [https://react-spectrum.adobe.com/react-aria/useListBox.html]
  2. click code example link: labelled "AriaListBoxOptions" to open popover
  3. within Popover, click "CollectionChildren" link
  4. within Popover, click "CollectionElement" link
  5. within Popover, click "SectionElement" link
  6. within Popover, click "SectionProps" link, Breadcrumbs will collapse to show menu button
  7. click Breadcrumbs menu button to expand menu
  8. using mouse, click a menu item before the current selection

Expected behavior:
Menu should close without also closing the Popover, and the contents of the Popover should update based on the selected breadcrumb.

Actual behavior:
Both the Menu and the Popover close, and focus is not restored correctly to the AriaListBoxOptions link.

Diagnosis:
The onHide method for the Popover gets called when a Breadcrumb Menu MenuItem is clicked, because onPointerUp on the MenuItem is interpreted as onInteractionOutside the Popover.

One possible solution would be to make sure the event target passed to onHide by onInteractionOutside is still in the document before closing the Popover with onClose.

🧢 Your Project:

Accessibility

…tion closes Popover

Steps to reproduce:
 1. open docs site to [https://react-spectrum.adobe.com/react-aria/useListBox.html]
 2. click code example link: labelled "AriaListBoxOptions" to open popover
 3. within Popover, click "CollectionChildren" link
 4. within Popover, click "CollectionElement" link
 5. within Popover, click "SectionElement" link
 6. within Popover, click "SectionProps" link, Breadcrumbs will collapse to show menu button
 7. click Breadcrumbs menu button to expand menu
 8. using mouse, click a menu item before the current selection

Expected behavior:
 Menu should close without also closing the Popover, and the contents of the Popover should update based on the selected breadcrumb.

Actual behavior:
 Both the Menu and the Popover close, and focus is not restored correctly to the AriaListBoxOptions link.

Diagnosis:
 The {{onHide}} method for the {{Popover}} gets called when a {{Breadcrumb}} {{Menu}} {{MenuItem}} is clicked, because {{onPointerUp}} on the {{MenuItem}} is interpreted as {{onInteractionOutside}} the {{Popover}}.

One possible solution would be to make sure the event target passed to {{onHide}} by {{onInteractionOutside}} is still in the document before closing the {{Popover}} with {{onClose}}.
@adobe-bot
Copy link

Build successful! 🎉

@adobe-bot
Copy link

Build successful! 🎉

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants