From 598f9ee0e641138820ae1b3d2a2121a1c21d3876 Mon Sep 17 00:00:00 2001
From: Nathan Bierema <nbierema@gmail.com>
Date: Wed, 12 Oct 2022 19:14:51 -0400
Subject: [PATCH] Auto-update menu position when using menu portalling (#5256)

* yarn install

* Add floating-ui

* Make MenuPortal function component

* Fix csstype resolution

* Update

* Remove unnecessary export

* Avoid ResizeObserver

* Create soft-bags-shave.md

* Include fixed

* Update

* Update

* Fix

* Bump @floating-ui/dom

* Format
---
 .changeset/soft-bags-shave.md                 |   5 +
 packages/react-select/package.json            |   4 +-
 packages/react-select/src/components/Menu.tsx | 201 ++++++++++++------
 yarn.lock                                     |  91 +++++++-
 4 files changed, 230 insertions(+), 71 deletions(-)
 create mode 100644 .changeset/soft-bags-shave.md

diff --git a/.changeset/soft-bags-shave.md b/.changeset/soft-bags-shave.md
new file mode 100644
index 0000000000..19a19a4d25
--- /dev/null
+++ b/.changeset/soft-bags-shave.md
@@ -0,0 +1,5 @@
+---
+'react-select': minor
+---
+
+Auto-update menu position when using menu portalling
diff --git a/packages/react-select/package.json b/packages/react-select/package.json
index 390dc8fa55..80fcd56b9a 100644
--- a/packages/react-select/package.json
+++ b/packages/react-select/package.json
@@ -13,10 +13,12 @@
     "@babel/runtime": "^7.12.0",
     "@emotion/cache": "^11.4.0",
     "@emotion/react": "^11.8.1",
+    "@floating-ui/dom": "^1.0.1",
     "@types/react-transition-group": "^4.4.0",
     "memoize-one": "^5.0.0",
     "prop-types": "^15.6.0",
-    "react-transition-group": "^4.3.0"
+    "react-transition-group": "^4.3.0",
+    "use-isomorphic-layout-effect": "^1.1.2"
   },
   "devDependencies": {
     "@types/jest-in-case": "^1.0.3",
diff --git a/packages/react-select/src/components/Menu.tsx b/packages/react-select/src/components/Menu.tsx
index 8ce7891c8e..ac98727a93 100644
--- a/packages/react-select/src/components/Menu.tsx
+++ b/packages/react-select/src/components/Menu.tsx
@@ -5,9 +5,14 @@ import {
   ReactNode,
   RefCallback,
   ContextType,
+  useState,
+  useCallback,
+  useRef,
 } from 'react';
 import { jsx } from '@emotion/react';
 import { createPortal } from 'react-dom';
+import { autoUpdate } from '@floating-ui/dom';
+import useLayoutEffect from 'use-isomorphic-layout-effect';
 
 import {
   animatedScrollTo,
@@ -15,7 +20,6 @@ import {
   getScrollParent,
   getScrollTop,
   normalizedHeight,
-  RectType,
   scrollTo,
 } from '../utils';
 import {
@@ -36,8 +40,8 @@ import {
 // Get Menu Placement
 // ------------------------------
 
-interface MenuState {
-  placement: CoercedMenuPlacement | null;
+interface CalculatedMenuPlacementAndHeight {
+  placement: CoercedMenuPlacement;
   maxHeight: number;
 }
 interface PlacementArgs {
@@ -58,10 +62,13 @@ export function getMenuPlacement({
   shouldScroll,
   isFixedPosition,
   theme,
-}: PlacementArgs): MenuState {
+}: PlacementArgs): CalculatedMenuPlacementAndHeight {
   const { spacing } = theme;
   const scrollParent = getScrollParent(menuEl!);
-  const defaultState: MenuState = { placement: 'bottom', maxHeight };
+  const defaultState: CalculatedMenuPlacementAndHeight = {
+    placement: 'bottom',
+    maxHeight,
+  };
 
   // something went wrong, return default state
   if (!menuEl || !menuEl.offsetParent) return defaultState;
@@ -288,9 +295,16 @@ export const menuCSS = <
 });
 
 const PortalPlacementContext = createContext<{
-  getPortalPlacement: ((menuState: MenuState) => void) | null;
+  getPortalPlacement:
+    | ((menuState: CalculatedMenuPlacementAndHeight) => void)
+    | null;
 }>({ getPortalPlacement: null });
 
+interface MenuState {
+  placement: CoercedMenuPlacement | null;
+  maxHeight: number;
+}
+
 // NOTE: internal only
 export class MenuPlacer<
   Option,
@@ -539,14 +553,10 @@ export interface MenuPortalProps<
   menuPosition: MenuPosition;
 }
 
-interface MenuPortalState {
-  placement: 'bottom' | 'top' | null;
-}
-
 export interface PortalStyleArgs {
   offset: number;
   position: MenuPosition;
-  rect: RectType;
+  rect: { left: number; width: number };
 }
 
 export const menuPortalCSS = ({
@@ -561,69 +571,126 @@ export const menuPortalCSS = ({
   zIndex: 1,
 });
 
-export class MenuPortal<
+interface ComputedPosition {
+  offset: number;
+  rect: { left: number; width: number };
+}
+
+export const MenuPortal = <
   Option,
   IsMulti extends boolean,
   Group extends GroupBase<Option>
-> extends Component<MenuPortalProps<Option, IsMulti, Group>, MenuPortalState> {
-  state: MenuPortalState = { placement: null };
+>({
+  appendTo,
+  children,
+  className,
+  controlElement,
+  cx,
+  innerProps,
+  menuPlacement,
+  menuPosition,
+  getStyles,
+}: MenuPortalProps<Option, IsMulti, Group>) => {
+  const menuPortalRef = useRef<HTMLDivElement | null>(null);
+  const cleanupRef = useRef<(() => void) | void | null>(null);
+
+  const [placement, setPlacement] = useState<'bottom' | 'top'>(
+    coercePlacement(menuPlacement)
+  );
+  const [computedPosition, setComputedPosition] =
+    useState<ComputedPosition | null>(null);
 
   // callback for occasions where the menu must "flip"
-  getPortalPlacement = ({ placement }: MenuState) => {
-    const initialPlacement = coercePlacement(this.props.menuPlacement);
+  const getPortalPlacement = useCallback(
+    ({ placement: updatedPlacement }: CalculatedMenuPlacementAndHeight) => {
+      // avoid re-renders if the placement has not changed
+      if (updatedPlacement !== placement) {
+        setPlacement(updatedPlacement);
+      }
+    },
+    [placement]
+  );
+
+  const updateComputedPosition = useCallback(() => {
+    if (!controlElement) return;
 
-    // avoid re-renders if the placement has not changed
-    if (placement !== initialPlacement) {
-      this.setState({ placement });
+    const rect = getBoundingClientObj(controlElement);
+    const scrollDistance = menuPosition === 'fixed' ? 0 : window.pageYOffset;
+    const offset = rect[placement] + scrollDistance;
+    if (
+      offset !== computedPosition?.offset ||
+      rect.left !== computedPosition?.rect.left ||
+      rect.width !== computedPosition?.rect.width
+    ) {
+      setComputedPosition({ offset, rect });
+    }
+  }, [
+    controlElement,
+    menuPosition,
+    placement,
+    computedPosition?.offset,
+    computedPosition?.rect.left,
+    computedPosition?.rect.width,
+  ]);
+
+  useLayoutEffect(() => {
+    updateComputedPosition();
+  }, [updateComputedPosition]);
+
+  const runAutoUpdate = useCallback(() => {
+    if (typeof cleanupRef.current === 'function') {
+      cleanupRef.current();
+      cleanupRef.current = null;
     }
-  };
-  render() {
-    const {
-      appendTo,
-      children,
-      className,
-      controlElement,
-      cx,
-      innerProps,
-      menuPlacement,
-      menuPosition: position,
-      getStyles,
-    } = this.props;
-    const isFixed = position === 'fixed';
 
-    // bail early if required elements aren't present
-    if ((!appendTo && !isFixed) || !controlElement) {
-      return null;
+    if (controlElement && menuPortalRef.current) {
+      cleanupRef.current = autoUpdate(
+        controlElement,
+        menuPortalRef.current,
+        updateComputedPosition
+      );
     }
+  }, [controlElement, updateComputedPosition]);
+
+  useLayoutEffect(() => {
+    runAutoUpdate();
+  }, [runAutoUpdate]);
+
+  const setMenuPortalElement = useCallback(
+    (menuPortalElement: HTMLDivElement) => {
+      menuPortalRef.current = menuPortalElement;
+      runAutoUpdate();
+    },
+    [runAutoUpdate]
+  );
 
-    const placement = this.state.placement || coercePlacement(menuPlacement);
-    const rect = getBoundingClientObj(controlElement);
-    const scrollDistance = isFixed ? 0 : window.pageYOffset;
-    const offset = rect[placement] + scrollDistance;
-    const state = { offset, position, rect };
-
-    // same wrapper element whether fixed or portalled
-    const menuWrapper = (
-      <div
-        css={getStyles('menuPortal', state)}
-        className={cx(
-          {
-            'menu-portal': true,
-          },
-          className
-        )}
-        {...innerProps}
-      >
-        {children}
-      </div>
-    );
-
-    return (
-      <PortalPlacementContext.Provider
-        value={{ getPortalPlacement: this.getPortalPlacement }}
-      >
-        {appendTo ? createPortal(menuWrapper, appendTo) : menuWrapper}
-      </PortalPlacementContext.Provider>
-    );
-  }
-}
+  // bail early if required elements aren't present
+  if ((!appendTo && menuPosition !== 'fixed') || !computedPosition) return null;
+
+  // same wrapper element whether fixed or portalled
+  const menuWrapper = (
+    <div
+      ref={setMenuPortalElement}
+      css={getStyles('menuPortal', {
+        offset: computedPosition.offset,
+        position: menuPosition,
+        rect: computedPosition.rect,
+      })}
+      className={cx(
+        {
+          'menu-portal': true,
+        },
+        className
+      )}
+      {...innerProps}
+    >
+      {children}
+    </div>
+  );
+
+  return (
+    <PortalPlacementContext.Provider value={{ getPortalPlacement }}>
+      {appendTo ? createPortal(menuWrapper, appendTo) : menuWrapper}
+    </PortalPlacementContext.Provider>
+  );
+};
diff --git a/yarn.lock b/yarn.lock
index 61b75db339..9c4453bfa0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1419,6 +1419,24 @@
     source-map "^0.5.7"
     stylis "^4.0.3"
 
+"@emotion/babel-plugin@^11.7.1":
+  version "11.9.2"
+  resolved "https://registry.yarnpkg.com/@emotion/babel-plugin/-/babel-plugin-11.9.2.tgz#723b6d394c89fb2ef782229d92ba95a740576e95"
+  integrity sha512-Pr/7HGH6H6yKgnVFNEj2MVlreu3ADqftqjqwUvDy/OJzKFgxKeTQ+eeUf20FOTuHVkDON2iNa25rAXVYtWJCjw==
+  dependencies:
+    "@babel/helper-module-imports" "^7.12.13"
+    "@babel/plugin-syntax-jsx" "^7.12.13"
+    "@babel/runtime" "^7.13.10"
+    "@emotion/hash" "^0.8.0"
+    "@emotion/memoize" "^0.7.5"
+    "@emotion/serialize" "^1.0.2"
+    babel-plugin-macros "^2.6.1"
+    convert-source-map "^1.5.0"
+    escape-string-regexp "^4.0.0"
+    find-root "^1.1.0"
+    source-map "^0.5.7"
+    stylis "4.0.13"
+
 "@emotion/babel-utils@^0.6.4":
   version "0.6.10"
   resolved "https://registry.yarnpkg.com/@emotion/babel-utils/-/babel-utils-0.6.10.tgz#83dbf3dfa933fae9fc566e54fbb45f14674c6ccc"
@@ -1452,6 +1470,17 @@
     "@emotion/weak-memoize" "^0.2.5"
     stylis "^4.0.3"
 
+"@emotion/cache@^11.9.3":
+  version "11.9.3"
+  resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.9.3.tgz#96638449f6929fd18062cfe04d79b29b44c0d6cb"
+  integrity sha512-0dgkI/JKlCXa+lEXviaMtGBL0ynpx4osh7rjOXE71q9bIF8G+XhJgvi+wDu0B0IdCVx37BffiwXlN9I3UuzFvg==
+  dependencies:
+    "@emotion/memoize" "^0.7.4"
+    "@emotion/sheet" "^1.1.1"
+    "@emotion/utils" "^1.0.0"
+    "@emotion/weak-memoize" "^0.2.5"
+    stylis "4.0.13"
+
 "@emotion/core@^10.0.22", "@emotion/core@^10.0.9":
   version "10.1.1"
   resolved "https://registry.yarnpkg.com/@emotion/core/-/core-10.1.1.tgz#c956c1365f2f2481960064bcb8c4732e5fb612c3"
@@ -1537,6 +1566,19 @@
     "@emotion/weak-memoize" "^0.2.5"
     hoist-non-react-statics "^3.3.1"
 
+"@emotion/react@^11.8.1":
+  version "11.9.3"
+  resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.9.3.tgz#f4f4f34444f6654a2e550f5dab4f2d360c101df9"
+  integrity sha512-g9Q1GcTOlzOEjqwuLF/Zd9LC+4FljjPjDfxSM7KmEakm+hsHXk+bYZ2q+/hTJzr0OUNkujo72pXLQvXj6H+GJQ==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@emotion/babel-plugin" "^11.7.1"
+    "@emotion/cache" "^11.9.3"
+    "@emotion/serialize" "^1.0.4"
+    "@emotion/utils" "^1.1.0"
+    "@emotion/weak-memoize" "^0.2.5"
+    hoist-non-react-statics "^3.3.1"
+
 "@emotion/serialize@^0.11.15", "@emotion/serialize@^0.11.16":
   version "0.11.16"
   resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-0.11.16.tgz#dee05f9e96ad2fb25a5206b6d759b2d1ed3379ad"
@@ -1569,6 +1611,17 @@
     "@emotion/utils" "^1.0.0"
     csstype "^3.0.2"
 
+"@emotion/serialize@^1.0.4":
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-1.0.4.tgz#ff31fd11bb07999611199c2229e152faadc21a3c"
+  integrity sha512-1JHamSpH8PIfFwAMryO2bNka+y8+KA5yga5Ocf2d7ZEiJjb7xlLW7aknBGZqJLajuLOvJ+72vN+IBSwPlXD1Pg==
+  dependencies:
+    "@emotion/hash" "^0.8.0"
+    "@emotion/memoize" "^0.7.4"
+    "@emotion/unitless" "^0.7.5"
+    "@emotion/utils" "^1.0.0"
+    csstype "^3.0.2"
+
 "@emotion/sheet@0.9.4":
   version "0.9.4"
   resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-0.9.4.tgz#894374bea39ec30f489bbfc3438192b9774d32e5"
@@ -1579,6 +1632,11 @@
   resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.0.1.tgz#245f54abb02dfd82326e28689f34c27aa9b2a698"
   integrity sha512-GbIvVMe4U+Zc+929N1V7nW6YYJtidj31lidSmdYcWozwoBIObXBnaJkKNDjZrLm9Nc0BR+ZyHNaRZxqNZbof5g==
 
+"@emotion/sheet@^1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.1.1.tgz#015756e2a9a3c7c5f11d8ec22966a8dbfbfac787"
+  integrity sha512-J3YPccVRMiTZxYAY0IOq3kd+hUP8idY8Kz6B/Cyo+JuXq52Ek+zbPbSQUrVQp95aJ+lsAW7DPL1P2Z+U1jGkKA==
+
 "@emotion/styled-base@^10.0.27":
   version "10.0.31"
   resolved "https://registry.yarnpkg.com/@emotion/styled-base/-/styled-base-10.0.31.tgz#940957ee0aa15c6974adc7d494ff19765a2f742a"
@@ -1632,6 +1690,11 @@
   resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-1.0.0.tgz#abe06a83160b10570816c913990245813a2fd6af"
   integrity sha512-mQC2b3XLDs6QCW+pDQDiyO/EdGZYOygE8s5N5rrzjSI4M3IejPE/JPndCBwRT9z982aqQNi6beWs1UeayrQxxA==
 
+"@emotion/utils@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-1.1.0.tgz#86b0b297f3f1a0f2bdb08eeac9a2f49afd40d0cf"
+  integrity sha512-iRLa/Y4Rs5H/f2nimczYmS5kFJEbpiVvgN3XVfZ022IYhuNA1IRSHEizcof88LtCTXtl9S2Cxt32KgaXEu72JQ==
+
 "@emotion/weak-memoize@0.2.5", "@emotion/weak-memoize@^0.2.5":
   version "0.2.5"
   resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz#8eed982e2ee6f7f4e44c253e12962980791efd46"
@@ -1652,6 +1715,18 @@
     minimatch "^3.0.4"
     strip-json-comments "^3.1.1"
 
+"@floating-ui/core@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.0.1.tgz#00e64d74e911602c8533957af0cce5af6b2e93c8"
+  integrity sha512-bO37brCPfteXQfFY0DyNDGB3+IMe4j150KFQcgJ5aBP295p9nBGeHEs/p0czrRbtlHq4Px/yoPXO/+dOCcF4uA==
+
+"@floating-ui/dom@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.0.1.tgz#3321d4e799d6ac2503e729131d07ad0e714aabeb"
+  integrity sha512-wBDiLUKWU8QNPNOTAFHiIAkBv1KlHauG2AhqjSeh2H+wR8PX+AArXfz8NkRexH5PgMJMmSOS70YS89AbWYh5dA==
+  dependencies:
+    "@floating-ui/core" "^1.0.1"
+
 "@istanbuljs/load-nyc-config@^1.0.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz#fd3db1d59ecf7cf121e80650bb86712f9b55eced"
@@ -5305,9 +5380,9 @@ cssstyle@^2.0.0:
     cssom "~0.3.6"
 
 csstype@^2.5.2, csstype@^2.5.7, csstype@^3.0.2:
-  version "3.0.8"
-  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.8.tgz#d2266a792729fb227cd216fb572f43728e1ad340"
-  integrity sha512-jXKhWqXPmlUeoQnF/EhTtTl4C9SnrxSH/jZUih3jmO6lBKr99rP3/+FmrMj4EFpOXzMtXHAZkd3x0E6h6Fgflw==
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.0.tgz#4ddcac3718d787cf9df0d1b7d15033925c8f29f2"
+  integrity sha512-uX1KG+x9h5hIJsaKR9xHUeUraxf8IODOwq9JLNPq6BwB04a/xgpq3rcx47l5BZu5zBPlgD342tdke3Hom/nJRA==
 
 csv-generate@^3.4.0:
   version "3.4.0"
@@ -13675,6 +13750,11 @@ stylis-rule-sheet@^0.0.10:
   resolved "https://registry.yarnpkg.com/stylis-rule-sheet/-/stylis-rule-sheet-0.0.10.tgz#44e64a2b076643f4b52e5ff71efc04d8c3c4a430"
   integrity sha512-nTbZoaqoBnmK+ptANthb10ZRZOGC+EmTLLUxeYIuHNkEKcmKgXX1XWKkUBT2Ac4es3NybooPe0SmvKdhKJZAuw==
 
+stylis@4.0.13:
+  version "4.0.13"
+  resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.0.13.tgz#f5db332e376d13cc84ecfe5dace9a2a51d954c91"
+  integrity sha512-xGPXiFVl4YED9Jh7Euv2V220mriG9u4B2TA6Ybjc1catrstKD2PpIdU3U0RKpkVBC2EhmL/F0sPCr9vrFTNRag==
+
 stylis@^3.5.0:
   version "3.5.4"
   resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.5.4.tgz#f665f25f5e299cf3d64654ab949a57c768b73fbe"
@@ -14481,6 +14561,11 @@ url@^0.11.0:
     punycode "1.3.2"
     querystring "0.2.0"
 
+use-isomorphic-layout-effect@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz#497cefb13d863d687b08477d9e5a164ad8c1a6fb"
+  integrity sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==
+
 use-memo-one@^1.1.1:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/use-memo-one/-/use-memo-one-1.1.2.tgz#0c8203a329f76e040047a35a1197defe342fab20"