fix: position updates from popper causing jank while scrolling (#554)

BREAKING CHANGE: bump to v1
nulogy · Feb 19, 2020 · 87bea3f · 87bea3f
1 parent 5442bb8
commit 87bea3f
Show file tree

Hide file tree

Showing 10 changed files with 37,664 additions and 5,109 deletions.
diff --git a/components-e2e/cypress/integration/components/DropdownMenu.spec.js b/components-e2e/cypress/integration/components/DropdownMenu.spec.js
@@ -1,7 +1,7 @@
 describe("DropdownMenu", () => {
   const getOpenButton = () => cy.get("button[aria-label='Open']");
   const getCloseButton = () => cy.get("button[aria-label='Close']");
-  const getTrigger = () => cy.get("button[class*='IconicButton'");
+  const getTrigger = () => cy.get("button[class*='IconicButton']");
   const getDropdownLink = () => cy.contains("Dropdown Link");
   const getCustomTrigger = () => cy.contains("Custom Trigger");
   const getDropdownContainer = () => cy.get(".nds-popper-pop-up");
@@ -12,7 +12,7 @@ describe("DropdownMenu", () => {
   };
   const assertDropdownIsClosed = () => {
     getOpenButton().should("exist");
-    cy.isNotInViewport(".nds-popper-pop-up");
+    cy.get(".nds-popper-pop-up").should("not.exist");
   };
 
   describe("default", () => {
@@ -46,9 +46,10 @@ describe("DropdownMenu", () => {
     });
 
     it("scrolls through the list on tabpress", () => {
-      getTrigger()
-        .click()
-        .tab();
+      getTrigger().click();
+      // Add wait for dropdown to render
+      cy.wait(500);
+      getTrigger().tab();
 
       getDropdownLink().should("be.focused");
     });

diff --git a/components-e2e/cypress/integration/components/Tooltip.spec.js b/components-e2e/cypress/integration/components/Tooltip.spec.js
@@ -25,7 +25,7 @@ describe("Tooltip", () => {
       cy.get('[aria-haspopup="true"]').trigger("mouseover");
       cy.get('[aria-haspopup="true"]').trigger("mouseout");
       cy.wait(2000);
-      cy.isNotInViewport('[role="tooltip"]');
+      cy.get('[role="tooltip"]').should("not.exist");
     });
   });
 });
diff --git a/components/src/Card/__snapshots__/Card.story.storyshot b/components/src/Card/__snapshots__/Card.story.storyshot
diff --git a/components/src/DropdownMenu/DropdownMenu.story.js b/components/src/DropdownMenu/DropdownMenu.story.js
@@ -1,12 +1,13 @@
 import React from "react";
 import { storiesOf } from "@storybook/react";
-import { DropdownMenu, DropdownLink, DropdownButton, DropdownItem, Button } from "../index";
+import { DropdownMenu, DropdownLink, DropdownButton, DropdownItem, Button, Card, Text } from "../index";
 
 const customColors = {
   color: "white",
   hoverColor: "white",
   bgHoverColor: "black"
 };
+const cards = Array.from({ length: 100 }, (v, k) => k + 1);
 
 storiesOf("DropdownMenu", module)
   .add("DropdownMenu", () => (
@@ -59,4 +60,17 @@ storiesOf("DropdownMenu", module)
       <DropdownLink href="/">Dropdown Link</DropdownLink>
       <DropdownButton onClick={() => {}}>Dropdown Button</DropdownButton>
     </DropdownMenu>
+  ))
+  .add("Many dropdowns", () => (
+    <>
+      {cards.map(i => (
+        <Card key={i}>
+          <Text>Card {i}</Text>
+          <DropdownMenu>
+            <DropdownLink href="/">Dropdown Link</DropdownLink>
+            <DropdownButton onClick={() => {}}>Dropdown Button</DropdownButton>
+          </DropdownMenu>
+        </Card>
+      ))}
+    </>
   ));
diff --git a/components/src/DropdownMenu/DropdownMenuContainer.js b/components/src/DropdownMenu/DropdownMenuContainer.js
@@ -30,17 +30,15 @@ const getMenuMargin = (placement, showArrow) => {
   }
 };
 
-const DropdownMenuContainer = styled(Box)(({ open, position, placement, showArrow, backgroundColor }) => ({
-  ...position,
-  top: open ? 0 : "-9999px",
+const DropdownMenuContainer = styled(Box)(({ dataPlacement, showArrow, backgroundColor }) => ({
   backgroundColor: getThemeColor(backgroundColor),
   borderRadius: theme.radii.medium,
   borderTop: `1px solid  ${getThemeColor(backgroundColor)}`,
   borderBottom: `1px solid ${getThemeColor(backgroundColor)}`,
   boxShadow: theme.shadows.small,
   padding: "7px 0",
   zIndex: "100",
-  ...getMenuMargin(placement, showArrow)
+  ...getMenuMargin(dataPlacement, showArrow)
 }));
 
 DropdownMenuContainer.propTypes = {