From e3c63c8d5ad3c0730ba1dc5e0a62f422e16e6122 Mon Sep 17 00:00:00 2001 From: Elliot Courant Date: Sun, 30 Jul 2023 17:00:49 -0500 Subject: [PATCH 1/2] fix(menu): Fixed maxHeight calculation for menu portal. If the viewSpaceBelow is less than 300px (default max height): The first time the menu renders, the viewSpaceBelow will probably not be greater than the menuHeight. So it will take path 2. or 3. for bottom/auto. If the viewable area is greater than the minimum height then it will take path 3. On the next render, the menuHeight is now less than viewSpaceBelow because it was constrained by the third path. So the first path is taken, but preferredMaxHeight will be greater than viewSpaceBelow because path 3 was taken on the previous render. The menu renders but overflows outside the view. On the following render, path 1 is not taken because the height is greater than the viewSpaceBelow again (because its overflowing). So path 3 is taken again. This resolves the potential for flickering by making sure that the size that _would_ be rendered will actually fit. But comparing the `viewSpaceBelow` and `scrollSpaceBelow` to the `maxHeight` that would actually be returned, not to the height of the menu currently. --- packages/react-select/src/components/Menu.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react-select/src/components/Menu.tsx b/packages/react-select/src/components/Menu.tsx index 7483fa045e..7c1cf276d3 100644 --- a/packages/react-select/src/components/Menu.tsx +++ b/packages/react-select/src/components/Menu.tsx @@ -103,12 +103,12 @@ export function getMenuPlacement({ case 'auto': case 'bottom': // 1: the menu will fit, do nothing - if (viewSpaceBelow >= menuHeight) { + if (viewSpaceBelow >= preferredMaxHeight) { return { placement: 'bottom', maxHeight: preferredMaxHeight }; } // 2: the menu will fit, if scrolled - if (scrollSpaceBelow >= menuHeight && !isFixedPosition) { + if (scrollSpaceBelow >= preferredMaxHeight && !isFixedPosition) { if (shouldScroll) { animatedScrollTo(scrollParent, scrollDown, scrollDuration); } From 1b3571be6574a54b5a2899d5a9aa0fc2f0deae86 Mon Sep 17 00:00:00 2001 From: Elliot Courant Date: Sun, 30 Jul 2023 17:13:44 -0500 Subject: [PATCH 2/2] chore: Adding changeset --- .changeset/tasty-ways-smell.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/tasty-ways-smell.md diff --git a/.changeset/tasty-ways-smell.md b/.changeset/tasty-ways-smell.md new file mode 100644 index 0000000000..ad6d09b611 --- /dev/null +++ b/.changeset/tasty-ways-smell.md @@ -0,0 +1,5 @@ +--- +'react-select': patch +--- + +Fixed issue with how maxHeight for the menu portal could be calculated on smaller screens.