[Bug]: dynamicOverlapHeight is not reset to baseline after table component unmounts

[agdimech]

Browser

Chrome

Package version

3.0.1

React version

18.2.0

Description

I am using a Table component with a variant set to "full-page". I am using react-router to route to a detail page and I notice the dynamicOverlapHeight is retained when the detail page loads (--awsui-overlap-height-ujkcpl is present in

). When the Table (or any component that overrides these settings) unmounts, it should reset all of the default settings in the Layout to baseline.

Table uses an InternalContainer which appears to be the culprit: https://github.com/cloudscape-design/components/blob/main/src/container/internal.tsx#L59

I haven't tested but I assume to fix this we should change the layout callback as follows:

useLayoutEffect(
    function handleDynamicOverlapHeight() {
      if (hasDynamicHeight) {
        setDynamicOverlapHeight(overlapContainerQuery ?? 0);
      }
      return () => setDynamicOverlapHeight(0);
    },
    [hasDynamicHeight, overlapContainerQuery, setDynamicOverlapHeight]
  );

This should work as this code only overrides the offset if it is > 0:

components/src/app-layout/visual-refresh/layout.tsx

Line 125 in 7433543

dynamicOverlapHeight > 0 && { [customCssProps.overlapHeight]: `${dynamicOverlapHeight}px` }),

Source code

N/A

Reproduction

• Create a table with full-page variant.
• Add a link from the table to a new page using something like react-router.
• The new page will preserve the offset set by the previous page which is not correct.

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems

[FlorianDr]

Hi Adrian,

thank you for reporting this bug. We created a fix (#84), which is currently in review.

Thank you again!

[agdimech]

No problems - glad it was an easy fix which was my suspicion :)

[agdimech]

Has this been merged into main?

[timogasda]

Yes, this was merged into main. However, it might take some time until the change is released to npm.