diff --git a/packages/components/src/spectrum/listView/ListViewWrapper.tsx b/packages/components/src/spectrum/listView/ListViewWrapper.tsx index cf6ada4ceb..7aff7f9884 100644 --- a/packages/components/src/spectrum/listView/ListViewWrapper.tsx +++ b/packages/components/src/spectrum/listView/ListViewWrapper.tsx @@ -4,6 +4,7 @@ import { } from '@adobe/react-spectrum'; import { extractSpectrumHTMLElement, + useContentRect, useOnScrollRef, } from '@deephaven/react-hooks'; import { EMPTY_FUNCTION } from '@deephaven/utils'; @@ -41,11 +42,25 @@ export function ListViewWrapper( const scrollRef = useOnScrollRef(onScroll, extractSpectrumHTMLElement); + // Spectrum ListView crashes when it has zero height. Track the contentRect + // of the parent container and only render the ListView when it has a non-zero + // height. See https://github.com/adobe/react-spectrum/issues/6213 + const { ref: contentRectRef, contentRect } = useContentRect( + extractSpectrumHTMLElement + ); + return ( ( styleProps.UNSAFE_className )} > - + {/** + * Only render ListView if parent is visible. Some time in the future we + * should consider using `checkVisibility()` once it has better browser + * support. + */} + {contentRect.height === 0 ? null : ( + + )} ); } diff --git a/tests/styleguide.spec.ts b/tests/styleguide.spec.ts index 5c15fe69ee..662f660be0 100644 --- a/tests/styleguide.spec.ts +++ b/tests/styleguide.spec.ts @@ -80,6 +80,13 @@ test('UI regression test - Styleguide button section count', async ({ // Iterate over all sample sections and take a screenshot of each one. sampleSectionIds.forEach(id => { test(`UI regression test - Styleguide section - ${id}`, async ({ page }) => { + // Fail quickly if console errors are detected + page.on('console', msg => { + if (msg.type() === 'error') { + throw new Error(msg.text()); + } + }); + // Isolate the section await page.goto(`/ide/styleguide?isolateSection=true#${id}`); diff --git a/tests/styleguide.spec.ts-snapshots/pickers-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/pickers-chromium-linux.png index 78a2ba4e41..de31bd206a 100644 Binary files a/tests/styleguide.spec.ts-snapshots/pickers-chromium-linux.png and b/tests/styleguide.spec.ts-snapshots/pickers-chromium-linux.png differ diff --git a/tests/styleguide.spec.ts-snapshots/pickers-firefox-linux.png b/tests/styleguide.spec.ts-snapshots/pickers-firefox-linux.png index a0d3807c6c..6fcb401abe 100644 Binary files a/tests/styleguide.spec.ts-snapshots/pickers-firefox-linux.png and b/tests/styleguide.spec.ts-snapshots/pickers-firefox-linux.png differ diff --git a/tests/styleguide.spec.ts-snapshots/pickers-webkit-linux.png b/tests/styleguide.spec.ts-snapshots/pickers-webkit-linux.png index cbb781076e..f7a01e3c8b 100644 Binary files a/tests/styleguide.spec.ts-snapshots/pickers-webkit-linux.png and b/tests/styleguide.spec.ts-snapshots/pickers-webkit-linux.png differ