use only layout containment in virtualizers (#2163)

iTwin · Jul 23, 2024 · d5bc69c · d5bc69c
1 parent 2952902
commit d5bc69c
Show file tree

Hide file tree

Showing 6 changed files with 16 additions and 3 deletions.
diff --git a/.changeset/ninety-sloths-own.md b/.changeset/ninety-sloths-own.md
@@ -0,0 +1,5 @@
+---
+'@itwin/itwinui-react': patch
+---
+
+Fixed an issue in virtualized `Table` where horizontal scroll was broken.
diff --git a/...op/cypress-visual-screenshots/baseline/Table.test.ts-Full2 (scrolled right).png b/...op/cypress-visual-screenshots/baseline/Table.test.ts-Full2 (scrolled right).png
diff --git a/apps/react-workshop/src/Table.test.ts b/apps/react-workshop/src/Table.test.ts
@@ -85,6 +85,11 @@ describe('Table', () => {
       });
 
       cy.compareSnapshot(testName);
+
+      if (testName === 'Full2') {
+        cy.get('[role=table]').scrollTo('right');
+        cy.compareSnapshot(`${testName} (scrolled right)`);
+      }
     });
   });
 });
diff --git a/packages/itwinui-react/src/core/ComboBox/ComboBoxMenu.tsx b/packages/itwinui-react/src/core/ComboBox/ComboBoxMenu.tsx
@@ -101,7 +101,8 @@ const VirtualizedComboBoxMenu = (props: React.ComponentProps<'div'>) => {
           style={{
             minBlockSize: virtualizer.getTotalSize(),
             minInlineSize: '100%',
-            contain: 'strict',
+            contain: 'layout',
+            position: 'relative',
             ...props.style,
           }}
         >

diff --git a/packages/itwinui-react/src/core/Table/Table.tsx b/packages/itwinui-react/src/core/Table/Table.tsx
@@ -1158,7 +1158,8 @@ export const Table = <
                 style={{
                   minBlockSize: virtualizer.getTotalSize(),
                   minInlineSize: '100%',
-                  contain: 'strict',
+                  contain: 'layout',
+                  position: 'relative',
                 }}
               >
                 <slot />

diff --git a/packages/itwinui-react/src/core/Tree/Tree.tsx b/packages/itwinui-react/src/core/Tree/Tree.tsx
@@ -433,7 +433,8 @@ const VirtualizedTree = React.forwardRef(
           <div
             style={{
               minBlockSize: virtualizer.getTotalSize(),
-              contain: 'strict',
+              contain: 'layout',
+              position: 'relative',
             }}
           >
             <slot />