From 98bf58369388622646c95e34802c56bd124fd84f Mon Sep 17 00:00:00 2001 From: Sofiya Huts Date: Fri, 16 Aug 2019 11:18:17 +0200 Subject: [PATCH 1/9] fix: ESC should close opened Popup/Dialog if focus is lost and moved to body --- .../react/src/components/Dialog/Dialog.tsx | 18 ++++++++++++++++++ packages/react/src/components/Popup/Popup.tsx | 9 +++++++++ 2 files changed, 27 insertions(+) diff --git a/packages/react/src/components/Dialog/Dialog.tsx b/packages/react/src/components/Dialog/Dialog.tsx index 3f95815b6..129d05d53 100644 --- a/packages/react/src/components/Dialog/Dialog.tsx +++ b/packages/react/src/components/Dialog/Dialog.tsx @@ -5,6 +5,7 @@ import * as customPropTypes from '@stardust-ui/react-proptypes' import * as _ from 'lodash' import * as PropTypes from 'prop-types' import * as React from 'react' +import * as keyboardKey from 'keyboard-key' import { UIComponentProps, @@ -203,6 +204,17 @@ class Dialog extends AutoControlledComponent, DialogStat } } + handleDocumentKeydown = e => { + // if focus was lost from Dialog and moved to body, for e.g. when click on Dialog's content + // and ESC is pressed, the opened Dialog should get closed and the trigger should get focus + const bodyHasFocus: boolean = document.activeElement === document.body + const keyCode = keyboardKey.getCode(e) + if (keyCode === keyboardKey.Escape && bodyHasFocus && this.state.open) { + this.handleDialogCancel(e) + _.invoke(this.triggerRef, 'current.focus') + } + } + renderComponent({ accessibility, classes, ElementType, styles, unhandledProps }) { const { actions, @@ -310,6 +322,12 @@ class Dialog extends AutoControlledComponent, DialogStat type="click" capture /> + )} diff --git a/packages/react/src/components/Popup/Popup.tsx b/packages/react/src/components/Popup/Popup.tsx index ad8320f37..a81565fee 100644 --- a/packages/react/src/components/Popup/Popup.tsx +++ b/packages/react/src/components/Popup/Popup.tsx @@ -270,6 +270,15 @@ export default class Popup extends AutoControlledComponent _.invoke(this.triggerFocusableDomElement, 'focus')) + } } isOutsidePopupElementAndOutsideTriggerElement(refs: NodeRef[], e) { From 3cdeb8ed9cd3d771a19114c1990db12be2644819 Mon Sep 17 00:00:00 2001 From: Sofiya Huts Date: Fri, 16 Aug 2019 13:13:43 +0200 Subject: [PATCH 2/9] Add e2e test for popup --- e2e/tests/popupInPopup-example.tsx | 26 +++++++++++++ e2e/tests/popupInPopup-test.ts | 39 +++++++++++++++++++ .../react/src/components/Dialog/Dialog.tsx | 5 +-- packages/react/src/components/Popup/Popup.tsx | 4 +- 4 files changed, 70 insertions(+), 4 deletions(-) create mode 100644 e2e/tests/popupInPopup-example.tsx create mode 100644 e2e/tests/popupInPopup-test.ts diff --git a/e2e/tests/popupInPopup-example.tsx b/e2e/tests/popupInPopup-example.tsx new file mode 100644 index 000000000..9c22e5cff --- /dev/null +++ b/e2e/tests/popupInPopup-example.tsx @@ -0,0 +1,26 @@ +import * as React from 'react' +import { Button, Popup } from '@stardust-ui/react' + +export const selectors = { + popupContentId: 'popup-content-id', + popupTriggerId: 'popup-trigger-id', + popupContentNestedId: 'popup-content-nested-id', + popupTriggerNestedId: 'popup-trigger-nested-id', +} + +const PopupInPopupExample = () => ( + +
content
+ nested content} + trigger={