Skip to content
This repository has been archived by the owner on Mar 4, 2020. It is now read-only.

fix(Popup|Dialog): ESC should close opened Popup/Dialog if focus is lost and moved to body #1807

Merged
merged 16 commits into from
Aug 19, 2019

Conversation

sophieH29
Copy link
Contributor

Fixes #1709

@sophieH29 sophieH29 added 🧰 bug Something isn't working 🚀 ready for review accessibility All the Accessibility tasks and bugs should be tagged with this. labels Aug 16, 2019
@sophieH29 sophieH29 self-assigned this Aug 16, 2019
@codecov
Copy link

codecov bot commented Aug 16, 2019

Codecov Report

Merging #1807 into master will decrease coverage by 0.03%.
The diff coverage is 45.45%.

Impacted file tree graph

@@            Coverage Diff             @@
##           master    #1807      +/-   ##
==========================================
- Coverage   69.77%   69.74%   -0.04%     
==========================================
  Files         875      875              
  Lines        7508     7519      +11     
  Branches     2182     2186       +4     
==========================================
+ Hits         5239     5244       +5     
- Misses       2261     2267       +6     
  Partials        8        8
Impacted Files Coverage Δ
packages/react/src/components/Dialog/Dialog.tsx 34% <16.66%> (-2.37%) ⬇️
packages/react/src/components/Popup/Popup.tsx 65.92% <80%> (+0.4%) ⬆️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 11e0ba4...0d42291. Read the comment docs.

@lucivpav
Copy link
Contributor

Can we add a test?

@layershifter layershifter changed the title fix: ESC should close opened Popup/Dialog if focus is lost and moved to body fix(Popup|Dialog): ESC should close opened Popup/Dialog if focus is lost and moved to body Aug 16, 2019
@vercel vercel bot temporarily deployed to staging August 16, 2019 11:43 Inactive
@@ -203,6 +204,20 @@ class Dialog extends AutoControlledComponent<WithAsProp<DialogProps>, DialogStat
}
}

handleDocumentKeydown = (getRefs: Function) => e => {
Copy link
Member

Choose a reason for hiding this comment

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

Suggested change
handleDocumentKeydown = (getRefs: Function) => e => {
handleDocumentKeydown = (getRefs: Function) => (e: KeyboardEvent) => {

More type safety 🏋

lastOverlayRef && lastOverlayRef.current === this.overlayRef.current

const keyCode = keyboardKey.getCode(e)
if (keyCode === keyboardKey.Escape && isLastOpenedDialog && this.state.open) {
Copy link
Member

Choose a reason for hiding this comment

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

Suggested change
if (keyCode === keyboardKey.Escape && isLastOpenedDialog && this.state.open) {
if (keyboardKey.getCode(e) === keyboardKey.Escape && isLastOpenedDialog) {

You don't need this.state.open as this event listener will be mounted only when Dialog is open:

<Portal open={open} /* here we are */>
  <EventListener type="keydown" />
</Portal>

@vercel vercel bot temporarily deployed to staging August 19, 2019 10:06 Inactive
@sophieH29 sophieH29 merged commit a26fba7 into master Aug 19, 2019
@delete-merged-branch delete-merged-branch bot deleted the fix/remain-focus-dialog-on-click branch August 19, 2019 10:41
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
accessibility All the Accessibility tasks and bugs should be tagged with this. 🧰 bug Something isn't working 🚀 ready for review
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Dialog: can't close if not focused
3 participants