From d5bc69c6832badef0b2d43050ea4c26b42fe07a1 Mon Sep 17 00:00:00 2001 From: Mayank <9084735+mayank99@users.noreply.github.com> Date: Tue, 23 Jul 2024 15:37:48 -0400 Subject: [PATCH] use only `layout` containment in virtualizers (#2163) --- .changeset/ninety-sloths-own.md | 5 +++++ .../Table.test.ts-Full2 (scrolled right).png | Bin 0 -> 30778 bytes apps/react-workshop/src/Table.test.ts | 5 +++++ .../src/core/ComboBox/ComboBoxMenu.tsx | 3 ++- packages/itwinui-react/src/core/Table/Table.tsx | 3 ++- packages/itwinui-react/src/core/Tree/Tree.tsx | 3 ++- 6 files changed, 16 insertions(+), 3 deletions(-) create mode 100644 .changeset/ninety-sloths-own.md create mode 100755 apps/react-workshop/cypress-visual-screenshots/baseline/Table.test.ts-Full2 (scrolled right).png diff --git a/.changeset/ninety-sloths-own.md b/.changeset/ninety-sloths-own.md new file mode 100644 index 00000000000..23d495bf4a4 --- /dev/null +++ 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/apps/react-workshop/cypress-visual-screenshots/baseline/Table.test.ts-Full2 (scrolled right).png b/apps/react-workshop/cypress-visual-screenshots/baseline/Table.test.ts-Full2 (scrolled right).png new file mode 100755 index 0000000000000000000000000000000000000000..81fe0f0ad4bb199a4d96b69713abcec7fb207c82 GIT binary patch literal 30778 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 O6iA+~elF{r5}E)#bmEWz literal 0 HcmV?d00001 diff --git a/apps/react-workshop/src/Table.test.ts b/apps/react-workshop/src/Table.test.ts index 687eeb4c401..38b68f2f856 100644 --- 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 index f7f40a76281..aff7655589e 100644 --- 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 index cc8628c7b6b..d062786dcff 100644 --- 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', }} > diff --git a/packages/itwinui-react/src/core/Tree/Tree.tsx b/packages/itwinui-react/src/core/Tree/Tree.tsx index a248c1c7794..35c8e009369 100644 --- 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(