Skip to content

Overlay: Attach escape handler to overlay container - #1824

Merged
siddharthkp merged 20 commits into
mainfrom
siddharth/nested-overlay-handlers
Jan 27, 2022
Merged

Overlay: Attach escape handler to overlay container#1824
siddharthkp merged 20 commits into
mainfrom
siddharth/nested-overlay-handlers

Conversation

@siddharthkp

@siddharthkpsiddharthkp commented Jan 26, 2022•
edited
Loading

Copy link
Copy Markdown
Member

Hitting Escape on Overlays does not bubble up anymore.

Fixes#1802

Screenshots

Explainer: (tiny update on video: stopPropagation is now part of Overlay, you don't have to pass it manually) https://www.loom.com/share/962646dc566a41329c5d660c932ba985

Merge checklist

  • Added/updated tests
  • Tested in Chrome
  • Tested in Firefox
  • Tested in Safari
  • Tested in Edge

@changeset-bot

changeset-botBot commented Jan 26, 2022•
edited
Loading

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: c6294a7

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
NameType
@primer/reactPatch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@siddharthkpsiddharthkp changed the title Escape handlersOverlay: Attach event handlers to overlay containerJan 26, 2022
@siddharthkpsiddharthkp changed the title Overlay: Attach event handlers to overlay containerOverlay: Attach escape handler to overlay containerJan 26, 2022
@github-actions

github-actionsBot commented Jan 26, 2022•
edited
Loading

Copy link
Copy Markdown
Contributor

size-limit report 📦

PathSize
dist/browser.esm.js61.34 KB (+0.11% 🔺)
dist/browser.umd.js61.71 KB (+0.1% 🔺)

@siddharthkpsiddharthkp self-assigned this Jan 26, 2022
@siddharthkpsiddharthkp added accessibility patch release bug fixes, docs, housekeeping react labels Jan 26, 2022
@siddharthkp
siddharthkp marked this pull request as ready for review January 26, 2022 13:48
@siddharthkp
siddharthkp requested a review from a teamJanuary 26, 2022 13:48
rezrah
rezrah reviewed Jan 26, 2022
View reviewed changes
Comment threadsrc/hooks/useOnEscapePress.ts
* `onEscape` callback for memoization. Omit this param if the callback is already
* memoized. See `React.useCallback` for more info on memoization.
*
* @param containerRef {React.RefObject<HTMLElement>} The overlay element to attach the

@rezrahrezrahJan 26, 2022

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

❤️ great idea

rezrah
rezrah reviewed Jan 26, 2022
View reviewed changes
Comment threadsrc/stories/Overlay.stories.tsx Outdated
rezrah
rezrah approved these changes Jan 26, 2022
View reviewed changes

@rezrahrezrah left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🙌 amazing @siddharthkp - thanks for fixing this.

@rezrah

rezrah commented Jan 26, 2022

Copy link
Copy Markdown
Contributor

Out of curiosity, did you test the canary on memex and verify this works?

@siddharthkp

siddharthkp commented Jan 26, 2022•
edited
Loading

Copy link
Copy Markdown
MemberAuthor

Out of curiosity, did you test the canary on memex and verify this works?

Yes, but the solution isn't ideal. You would have to add event.stopPropagation to all the overlay components on the settings page. I feel like that should probably be the default when you are inside an Overlay and we can handle that on our end, making it easier for users 🤔

Update: done! and tested with memex and it works well!

We should should test the release branch with memex nicely for this one!

@siddharthkp
siddharthkp merged commit 4eab65e into mainJan 27, 2022
@siddharthkp
siddharthkp deleted the siddharth/nested-overlay-handlers branch January 27, 2022 10:07
@primer-cssprimer-css mentioned this pull request Jan 27, 2022
Merged
@siddharthkpsiddharthkp mentioned this pull request Jan 27, 2022
Closed
@iansan5653iansan5653 mentioned this pull request Feb 10, 2022
Closed
siddharthkp added a commit that referenced this pull request Feb 10, 2022
@siddharthkp
Revert "Overlay: Attach escape handler to overlay container (#1824)"
d71cde4
This reverts commit 4eab65e.
@siddharthkpsiddharthkp mentioned this pull request Feb 10, 2022
Merged
colebemis pushed a commit that referenced this pull request Feb 10, 2022
@siddharthkp
Revert "Overlay: Attach escape handler to overlay container (#1824)" (#…
3f40522
…1856)
* Revert "Overlay: Attach escape handler to overlay container (#1824)"
This reverts commit 4eab65e.
* add changeset
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@rezrahrezrahrezrah approved these changes

Assignees

@siddharthkpsiddharthkp

Labels

accessibilitypatch releasebug fixes, docs, housekeepingreact

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Overlay: Events bubbling up to the page can conflict with global shortcuts

2 participants

@siddharthkp@rezrah