From 86a73ac37a7e6aaac8fe070f3133fdf3c4835c17 Mon Sep 17 00:00:00 2001 From: YuanboXue-Amber Date: Thu, 5 May 2022 11:38:05 +0200 Subject: [PATCH 1/6] check mouse down --- packages/fluentui/e2e/cypress.json | 1 - .../src/components/Dialog/Dialog.tsx | 17 ++++++++++++++++- 2 files changed, 16 insertions(+), 2 deletions(-) diff --git a/packages/fluentui/e2e/cypress.json b/packages/fluentui/e2e/cypress.json index ef0daf0070aee..a0d55aa5b318a 100644 --- a/packages/fluentui/e2e/cypress.json +++ b/packages/fluentui/e2e/cypress.json @@ -1,5 +1,4 @@ { - "ignoreTestFiles": "*?ialog*.spec.ts", "video": false, "screenshotOnRunFailure": false, "integrationFolder": "./tests", diff --git a/packages/fluentui/react-northstar/src/components/Dialog/Dialog.tsx b/packages/fluentui/react-northstar/src/components/Dialog/Dialog.tsx index 806ff2f355010..e7dbdf5706a7d 100644 --- a/packages/fluentui/react-northstar/src/components/Dialog/Dialog.tsx +++ b/packages/fluentui/react-northstar/src/components/Dialog/Dialog.tsx @@ -258,10 +258,24 @@ export const Dialog = (React.forwardRef((props, ref }, }); + // when press left click on Dialog content and hold, and mouse up on Dialog overlay, Dialog should keep open + const isMouseDownInsideContent = React.useRef(false); + const registerMouseDownOnDialogContent = (e: React.MouseEvent) => { + if (e.button === 0) { + isMouseDownInsideContent.current = true; + } + if (unhandledProps.onMouseDown) { + _.invoke(unhandledProps, 'onMouseDown', e); + } + }; + const handleOverlayClick = (e: MouseEvent) => { // Dialog has different conditions to close than Popup, so we don't need to iterate across all // refs - const isInsideContentClick = doesNodeContainClick(contentRef.current, e, context.target); + const isInsideContentClick = + isMouseDownInsideContent.current || doesNodeContainClick(contentRef.current, e, context.target); + isMouseDownInsideContent.current = false; + const isInsideOverlayClick = doesNodeContainClick(overlayRef.current, e, context.target); const shouldClose = !isInsideContentClick && isInsideOverlayClick; @@ -318,6 +332,7 @@ export const Dialog = (React.forwardRef((props, ref className: classes.root, ref, ...unhandledProps, + onMouseDown: registerMouseDownOnDialogContent, })} > {Header.create(header, { From c8128d4f8c00662ac5663019c8208c9cf2467459 Mon Sep 17 00:00:00 2001 From: YuanboXue-Amber Date: Thu, 5 May 2022 13:59:31 +0200 Subject: [PATCH 2/6] e2e fix --- .../fluentui/e2e/tests/dialogInDialogWithDropdown.spec.ts | 2 +- packages/fluentui/e2e/tests/dialogWithDropdown.spec.ts | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/fluentui/e2e/tests/dialogInDialogWithDropdown.spec.ts b/packages/fluentui/e2e/tests/dialogInDialogWithDropdown.spec.ts index a6314e383d7af..73857f58df2ce 100644 --- a/packages/fluentui/e2e/tests/dialogInDialogWithDropdown.spec.ts +++ b/packages/fluentui/e2e/tests/dialogInDialogWithDropdown.spec.ts @@ -44,7 +44,7 @@ describe('Dialog in Dialog', () => { cy.clickOn(innerTrigger); cy.clickOn(dropdownIndicator); - cy.visible(dropdownList); + cy.exist(dropdownList); // TODO this test was failling on timeout. Cypress was probably too fast and components weren't ready. cy.wait(50); cy.waitForSelectorAndPressKey(dropdownList, '{esc}'); diff --git a/packages/fluentui/e2e/tests/dialogWithDropdown.spec.ts b/packages/fluentui/e2e/tests/dialogWithDropdown.spec.ts index 1fc0ee3e61f87..9f1aabd9ddbd0 100644 --- a/packages/fluentui/e2e/tests/dialogWithDropdown.spec.ts +++ b/packages/fluentui/e2e/tests/dialogWithDropdown.spec.ts @@ -36,7 +36,7 @@ describe('Dialog with dropdown', () => { cy.clickOn(dialogTrigger); cy.clickOn(dropdownIndicator); - cy.visible(dropdownList); + cy.exist(dropdownList); cy.waitForSelectorAndPressKey(dropdownList, '{esc}'); cy.visible(dropdownSelector); }); @@ -45,7 +45,7 @@ describe('Dialog with dropdown', () => { cy.clickOn(dialogTrigger); cy.clickOn(dropdownIndicator); - cy.visible(dropdownList); + cy.exist(dropdownList); cy.waitForSelectorAndPressKey(dropdownList, '{esc}'); cy.visible(dropdownSelector); From 2983599161df0808be7362521fa37bf28893955b Mon Sep 17 00:00:00 2001 From: YuanboXue-Amber Date: Thu, 5 May 2022 14:06:07 +0200 Subject: [PATCH 3/6] chglog --- packages/fluentui/CHANGELOG.md | 1 + packages/fluentui/e2e/cypress.json | 1 + 2 files changed, 2 insertions(+) diff --git a/packages/fluentui/CHANGELOG.md b/packages/fluentui/CHANGELOG.md index e2f34094e8515..60bbca493ba6b 100644 --- a/packages/fluentui/CHANGELOG.md +++ b/packages/fluentui/CHANGELOG.md @@ -30,6 +30,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm - fix `Tooltip` constrast style for pointing and subtle=false @yuanboxue-amber ([#22696](https://github.com/microsoft/fluentui/pull/22696)) - Vertical menu background color should not change on focus in dark theme @yuanboxue-amber ([#22707](https://github.com/microsoft/fluentui/pull/22707)) - Align `default` scheme colors between v0 and v9 @jurokapsiar ([#22699](https://github.com/microsoft/fluentui/pull/22699)) +- Fix `Dialog` to keep it open when press click on content and release outside @yuanboxue-amber ([#22849](https://github.com/microsoft/fluentui/pull/22849)) ### Documentation - Use https for Embed and Video examples @Hirse ([#22738](https://github.com/microsoft/fluentui/pull/22738)) diff --git a/packages/fluentui/e2e/cypress.json b/packages/fluentui/e2e/cypress.json index a0d55aa5b318a..ef0daf0070aee 100644 --- a/packages/fluentui/e2e/cypress.json +++ b/packages/fluentui/e2e/cypress.json @@ -1,4 +1,5 @@ { + "ignoreTestFiles": "*?ialog*.spec.ts", "video": false, "screenshotOnRunFailure": false, "integrationFolder": "./tests", From d42d7decf53869182a1bcbdb5668b723219ad3f7 Mon Sep 17 00:00:00 2001 From: YuanboXue-Amber Date: Thu, 5 May 2022 14:08:17 +0200 Subject: [PATCH 4/6] Revert "e2e fix" This reverts commit c8128d4f8c00662ac5663019c8208c9cf2467459. --- .../fluentui/e2e/tests/dialogInDialogWithDropdown.spec.ts | 2 +- packages/fluentui/e2e/tests/dialogWithDropdown.spec.ts | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/fluentui/e2e/tests/dialogInDialogWithDropdown.spec.ts b/packages/fluentui/e2e/tests/dialogInDialogWithDropdown.spec.ts index 73857f58df2ce..a6314e383d7af 100644 --- a/packages/fluentui/e2e/tests/dialogInDialogWithDropdown.spec.ts +++ b/packages/fluentui/e2e/tests/dialogInDialogWithDropdown.spec.ts @@ -44,7 +44,7 @@ describe('Dialog in Dialog', () => { cy.clickOn(innerTrigger); cy.clickOn(dropdownIndicator); - cy.exist(dropdownList); + cy.visible(dropdownList); // TODO this test was failling on timeout. Cypress was probably too fast and components weren't ready. cy.wait(50); cy.waitForSelectorAndPressKey(dropdownList, '{esc}'); diff --git a/packages/fluentui/e2e/tests/dialogWithDropdown.spec.ts b/packages/fluentui/e2e/tests/dialogWithDropdown.spec.ts index 9f1aabd9ddbd0..1fc0ee3e61f87 100644 --- a/packages/fluentui/e2e/tests/dialogWithDropdown.spec.ts +++ b/packages/fluentui/e2e/tests/dialogWithDropdown.spec.ts @@ -36,7 +36,7 @@ describe('Dialog with dropdown', () => { cy.clickOn(dialogTrigger); cy.clickOn(dropdownIndicator); - cy.exist(dropdownList); + cy.visible(dropdownList); cy.waitForSelectorAndPressKey(dropdownList, '{esc}'); cy.visible(dropdownSelector); }); @@ -45,7 +45,7 @@ describe('Dialog with dropdown', () => { cy.clickOn(dialogTrigger); cy.clickOn(dropdownIndicator); - cy.exist(dropdownList); + cy.visible(dropdownList); cy.waitForSelectorAndPressKey(dropdownList, '{esc}'); cy.visible(dropdownSelector); From f6cfba3a596c1669d8a8c6599bdfbf80383fac96 Mon Sep 17 00:00:00 2001 From: YuanboXue-Amber Date: Mon, 9 May 2022 15:41:48 +0200 Subject: [PATCH 5/6] e2e --- .../fluentui/e2e/tests/dialog-example.tsx | 18 +++++++ packages/fluentui/e2e/tests/dialog.spec.ts | 49 +++++++++++++++++++ 2 files changed, 67 insertions(+) create mode 100644 packages/fluentui/e2e/tests/dialog-example.tsx create mode 100644 packages/fluentui/e2e/tests/dialog.spec.ts diff --git a/packages/fluentui/e2e/tests/dialog-example.tsx b/packages/fluentui/e2e/tests/dialog-example.tsx new file mode 100644 index 0000000000000..9780b7f8a0d53 --- /dev/null +++ b/packages/fluentui/e2e/tests/dialog-example.tsx @@ -0,0 +1,18 @@ +import * as React from 'react'; +import { Button, Dialog } from '@fluentui/react-northstar'; + +export const selectors = { + trigger: 'trigger', + cancelButton: 'cancelButton', +}; + +const DialogBlockBodyScrollExample = () => ( + } + /> +); + +export default DialogBlockBodyScrollExample; diff --git a/packages/fluentui/e2e/tests/dialog.spec.ts b/packages/fluentui/e2e/tests/dialog.spec.ts new file mode 100644 index 0000000000000..62d6ad3476abb --- /dev/null +++ b/packages/fluentui/e2e/tests/dialog.spec.ts @@ -0,0 +1,49 @@ +import { selectors } from './dialog-example'; + +describe('Dialog', () => { + const trigger = `#${selectors.trigger}`; + const cancelButton = `#${selectors.cancelButton}`; + + beforeEach(() => { + cy.gotoTestCase(__filename, trigger); + cy.get('body').click('bottomRight'); + }); + + it('should open on click trigger', () => { + cy.clickOn(trigger); + cy.visible(cancelButton); + }); + + it('should close on click cancel button', () => { + cy.clickOn(trigger); + cy.visible(cancelButton); + + cy.clickOn(cancelButton); + cy.notExist(cancelButton); + }); + + it('should close on click overlay', () => { + cy.clickOn(trigger); + cy.visible(cancelButton); + + cy.get('.ui-dialog__overlay').click('topLeft'); + cy.notExist(cancelButton); + }); + + it('should keep open when mouse down on button, and drag mouse outside of Dialog', () => { + cy.clickOn(trigger); + cy.visible(cancelButton); + + cy.get(cancelButton).trigger('mousedown', { eventConstructor: 'MouseEvent', button: 0 }).trigger('mousemove', { + eventConstructor: 'MouseEvent', + clientX: 1, + clientY: 1, + pageX: 1, + pageY: 1, + screenX: 1, + screenY: 1, + }); // move mouse to top-left corner + cy.get('.ui-dialog__overlay').click('topLeft'); + cy.visible(cancelButton); + }); +}); From d7a27dfa5b8df49d92a9beb11c6a7352018e838c Mon Sep 17 00:00:00 2001 From: YuanboXue-Amber Date: Tue, 10 May 2022 10:10:59 +0200 Subject: [PATCH 6/6] comments on test --- packages/fluentui/e2e/tests/dialog.spec.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/fluentui/e2e/tests/dialog.spec.ts b/packages/fluentui/e2e/tests/dialog.spec.ts index 62d6ad3476abb..1b301af7b2f9c 100644 --- a/packages/fluentui/e2e/tests/dialog.spec.ts +++ b/packages/fluentui/e2e/tests/dialog.spec.ts @@ -34,6 +34,7 @@ describe('Dialog', () => { cy.clickOn(trigger); cy.visible(cancelButton); + // press click within Dialog content, drag mouse outside of Dialog content cy.get(cancelButton).trigger('mousedown', { eventConstructor: 'MouseEvent', button: 0 }).trigger('mousemove', { eventConstructor: 'MouseEvent', clientX: 1,