🐛 Fix bug in production w/ cell popovers for cells with numeric heigh…

…ts that have overflowing content + Add Cypress regression tests to ensure popovers are rendering from the correct anchor/position
elastic · Oct 4, 2023 · 6f3a1e8 · 6f3a1e8
1 parent e291a7d
commit 6f3a1e8
Show file tree

Hide file tree

Showing 3 changed files with 95 additions and 2 deletions.
diff --git a/src/components/datagrid/_data_grid_data_row.scss b/src/components/datagrid/_data_grid_data_row.scss
@@ -138,6 +138,15 @@
   }
 }
 
+.euiDataGridRowCell__numericalHeight {
+  // Without this rule, popover anchors content that overflows off the page
+  [data-euiportal],
+  .euiPopover,
+  .euiPopover__anchor {
+    height: 100%;
+  }
+}
+
 // Cell actions
 .euiDataGridRowCell__actions {
   display: flex;

diff --git a/src/components/datagrid/body/data_grid_cell.tsx b/src/components/datagrid/body/data_grid_cell.tsx
@@ -94,7 +94,18 @@ const EuiDataGridCellContent: FunctionComponent<
 
     let cellContent = (
       <div
-        ref={setCellContentsRef}
+        ref={(el) => {
+          setCellContentsRef(el);
+          setPopoverAnchorRef.current =
+            cellHeightType === 'default'
+              ? // Default height cells need the popover to be anchored on the wrapper,
+                // in order for the popover to centered on the full cell width (as content
+                // width is affected by the width of cell actions)
+                (el?.parentElement as HTMLDivElement)
+              : // Numerical height cells need the popover anchor to be below the wrapper
+                // class, in order to set height: 100% on the portalled popover div wrappers
+                el;
+        }}
         data-datagrid-cellcontent
         className={classes}
       >
@@ -135,7 +146,7 @@ const EuiDataGridCellContent: FunctionComponent<
     );
 
     return (
-      <div ref={setPopoverAnchorRef} className={wrapperClasses}>
+      <div className={wrapperClasses}>
         {cellContent}
         {screenReaderText}
         {cellActions}

diff --git a/src/components/datagrid/body/data_grid_cell_popover.spec.tsx b/src/components/datagrid/body/data_grid_cell_popover.spec.tsx
@@ -130,4 +130,77 @@ describe('EuiDataGridCellPopover', () => {
 
     cy.get('.euiDataGridRowCell__popover.hello.world').should('exist');
   });
+
+  describe('popover anchor/positioning', () => {
+    const props = {
+      ...baseProps,
+      rowCount: 1,
+      renderCellValue: ({ columnId }) => {
+        if (columnId === 'A') {
+          return 'short text';
+        } else {
+          return 'Very long text that should get cut off because it is so long';
+        }
+      },
+    };
+
+    const openCellPopover = (id: string) => {
+      cy.get(
+        `[data-gridcell-row-index="0"][data-gridcell-column-id="${id}"]`
+      ).realClick();
+      cy.realPress('Enter');
+    };
+
+    it('default row height', () => {
+      cy.realMount(<EuiDataGrid {...props} />);
+
+      openCellPopover('B');
+      cy.get('[data-test-subj="euiDataGridExpansionPopover"]')
+        .should('have.css', 'left', '24.5px')
+        .should('have.css', 'top', '104px');
+    });
+
+    it('lineCount row height', () => {
+      cy.realMount(
+        <EuiDataGrid
+          {...props}
+          rowHeightsOptions={{ defaultHeight: { lineCount: 2 } }}
+        />
+      );
+      openCellPopover('B');
+
+      cy.get('[data-test-subj="euiDataGridExpansionPopover"]')
+        .should('have.css', 'left', '24.5px')
+        .should('have.css', 'top', '127px');
+    });
+
+    it('numerical row height', () => {
+      cy.realMount(
+        <EuiDataGrid {...props} rowHeightsOptions={{ defaultHeight: 40 }} />
+      );
+      openCellPopover('B');
+
+      // Should not be anchored to the bottom of the overflowing text
+      cy.get('[data-test-subj="euiDataGridExpansionPopover"]')
+        .should('have.css', 'left', '24.5px')
+        .should('have.css', 'top', '106px');
+    });
+
+    it('auto row height', () => {
+      cy.realMount(
+        <EuiDataGrid {...props} rowHeightsOptions={{ defaultHeight: 'auto' }} />
+      );
+
+      openCellPopover('B');
+      cy.get('[data-test-subj="euiDataGridExpansionPopover"]')
+        .should('have.css', 'left', '24.5px')
+        .should('have.css', 'top', '151px');
+
+      // The shorter cell content should not have the same top position
+      openCellPopover('A');
+      cy.get('[data-test-subj="euiDataGridExpansionPopover"]')
+        .should('have.css', 'left', '19px')
+        .should('have.css', 'top', '103px');
+    });
+  });
 });