fix(Popup): prevent closing popup when finishing select text outside (#…

…19201) * fix(Popup): prevent closing popup on finishing select text outside * fix: tests * fix: test * fix popup * update test * fix test Co-authored-by: Charles Assuncao <charlesassuncao@192.168.1.39>
microsoft · Aug 3, 2021 · 31f949a · 31f949a
1 parent 16bf819
commit 31f949a
Show file tree

Hide file tree

Showing 5 changed files with 70 additions and 1 deletion.
diff --git a/packages/fluentui/e2e/cypress/support/commands.js b/packages/fluentui/e2e/cypress/support/commands.js
@@ -36,6 +36,10 @@ Cypress.Commands.add('clickOn', selector => {
   cy.get(selector).realClick();
 });
 
+Cypress.Commands.add('mouseDownOn', selector => {
+  cy.get(selector).trigger('mousedown');
+});
+
 Cypress.Commands.add('focusOn', selector => {
   cy.get(selector).focus();
 });

diff --git a/packages/fluentui/e2e/cypress/support/index.d.ts b/packages/fluentui/e2e/cypress/support/index.d.ts
@@ -31,6 +31,7 @@ declare namespace Cypress {
     nothingIsFocused(): Chainable<Element>;
     simulatePageMove(): Chainable<Element>;
     clickOn(selector: string): Chainable<Element>;
+    mouseDownOn(selector: string): Chainable<Element>;
     focusOn(selector: string): Chainable<Element>;
     hover(selector: string): Chainable<Element>;
     resizeViewport(width: number): Chainable<Element>;

diff --git a/packages/fluentui/e2e/tests/popupMouseDownSelecting-example.tsx b/packages/fluentui/e2e/tests/popupMouseDownSelecting-example.tsx
@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { Popup, Button, buttonClassName, popupContentClassName } from '@fluentui/react-northstar';
+
+export const selectors = {
+  popupContent: popupContentClassName,
+  button: buttonClassName,
+  secondDiv: 'second-div',
+};
+
+const PopupWithoutTriggerExample = () => {
+  return (
+    <div
+      style={{
+        width: 500,
+        height: 500,
+      }}
+    >
+      <Popup
+        content={{
+          content: 'Test Content',
+          styles: { margin: '20px' },
+        }}
+        trigger={<Button content="Test button" />}
+      />
+      <div
+        id={selectors.secondDiv}
+        style={{
+          width: 50,
+          height: 50,
+          margin: 50,
+        }}
+      />
+    </div>
+  );
+};
+
+export default PopupWithoutTriggerExample;
diff --git a/packages/fluentui/e2e/tests/popupMouseDownSelecting.spec.ts b/packages/fluentui/e2e/tests/popupMouseDownSelecting.spec.ts
@@ -0,0 +1,15 @@
+describe('Popup without `trigger`', () => {
+  const selectors = { popupContent: 'ui-popup__content', button: 'ui-button' };
+  const button = `.${selectors.button}`;
+  const popupContent = `.${selectors.popupContent}`;
+
+  beforeEach(() => {
+    cy.gotoTestCase(__filename, button);
+  });
+
+  it('Popup still open on mousedown event', () => {
+    cy.clickOn(button);
+    cy.get(popupContent).trigger('mousedown', { which: 1 }).trigger('mousemove', { clientX: 300, clientY: 300 });
+    cy.visible(popupContent);
+  });
+});
diff --git a/packages/fluentui/react-northstar/src/components/Popup/Popup.tsx b/packages/fluentui/react-northstar/src/components/Popup/Popup.tsx
@@ -175,7 +175,7 @@ export const Popup: React.FC<PopupProps> &
   const [isOpenedByRightClick, setIsOpenedByRightClick] = React.useState(false);
 
   const closeTimeoutId = React.useRef<number | undefined>();
-
+  const mouseDownEventRef = React.useRef<MouseEvent | null>();
   const popupContentRef = React.useRef<HTMLElement>();
   const pointerTargetRef = React.useRef<HTMLElement>();
   const triggerRef = React.useRef<HTMLElement>();
@@ -230,6 +230,13 @@ export const Popup: React.FC<PopupProps> &
   });
 
   const handleDocumentClick = (getRefs: Function) => (e: MouseEvent) => {
+    const currentMouseDownEvent = mouseDownEventRef.current;
+    mouseDownEventRef.current = null;
+
+    if (currentMouseDownEvent && !isOutsidePopupElement(getRefs(), currentMouseDownEvent)) {
+      return;
+    }
+
     if (isOpenedByRightClick && isOutsidePopupElement(getRefs(), e)) {
       trySetOpen(false, e);
       rightClickReferenceObject.current = null;
@@ -241,6 +248,10 @@ export const Popup: React.FC<PopupProps> &
     }
   };
 
+  const handleMouseDown = (e: MouseEvent) => {
+    mouseDownEventRef.current = e;
+  };
+
   const handleDocumentKeyDown = (getRefs: Function) => (e: KeyboardEvent) => {
     const keyCode = getCode(e);
     const isMatchingKey = keyCode === keyboardKey.Enter || keyCode === SpacebarKey;
@@ -439,6 +450,7 @@ export const Popup: React.FC<PopupProps> &
 
             {context.target && (
               <>
+                <EventListener listener={handleMouseDown} target={context.target} type="mousedown" />
                 <EventListener listener={handleDocumentClick(getRefs)} target={context.target} type="click" capture />
                 <EventListener
                   listener={handleDocumentClick(getRefs)}