From d3b52c381443ce5da3ea280751cd2ad55e8fada8 Mon Sep 17 00:00:00 2001
From: Nathan Bierema <nbierema@gmail.com>
Date: Mon, 4 Jul 2022 10:20:03 -0400
Subject: [PATCH 01/14] yarn install

---
 yarn.lock | 68 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 68 insertions(+)

diff --git a/yarn.lock b/yarn.lock
index 61b75db339..9288d91e46 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"
@@ -13675,6 +13738,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"

From 89e623b0a6af124f8988a104fdafec50faf411a8 Mon Sep 17 00:00:00 2001
From: Nathan Bierema <nbierema@gmail.com>
Date: Mon, 4 Jul 2022 10:21:17 -0400
Subject: [PATCH 02/14] Add floating-ui

---
 packages/react-select/package.json |  1 +
 yarn.lock                          | 32 +++++++++++++++++++++++++++++-
 2 files changed, 32 insertions(+), 1 deletion(-)

diff --git a/packages/react-select/package.json b/packages/react-select/package.json
index 390dc8fa55..dc25476d46 100644
--- a/packages/react-select/package.json
+++ b/packages/react-select/package.json
@@ -13,6 +13,7 @@
     "@babel/runtime": "^7.12.0",
     "@emotion/cache": "^11.4.0",
     "@emotion/react": "^11.8.1",
+    "@floating-ui/react-dom": "^0.7.2",
     "@types/react-transition-group": "^4.4.0",
     "memoize-one": "^5.0.0",
     "prop-types": "^15.6.0",
diff --git a/yarn.lock b/yarn.lock
index 9288d91e46..caea14c9e8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1715,6 +1715,26 @@
     minimatch "^3.0.4"
     strip-json-comments "^3.1.1"
 
+"@floating-ui/core@^0.7.3":
+  version "0.7.3"
+  resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-0.7.3.tgz#d274116678ffae87f6b60e90f88cc4083eefab86"
+  integrity sha512-buc8BXHmG9l82+OQXOFU3Kr2XQx9ys01U/Q9HMIrZ300iLc8HLMgh7dcCqgYzAzf4BkoQvDcXf5Y+CuEZ5JBYg==
+
+"@floating-ui/dom@^0.5.3":
+  version "0.5.4"
+  resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-0.5.4.tgz#4eae73f78bcd4bd553ae2ade30e6f1f9c73fe3f1"
+  integrity sha512-419BMceRLq0RrmTSDxn8hf9R3VCJv2K9PUfugh5JyEFmdjzDo+e8U5EdR8nzKq8Yj1htzLm3b6eQEEam3/rrtg==
+  dependencies:
+    "@floating-ui/core" "^0.7.3"
+
+"@floating-ui/react-dom@^0.7.2":
+  version "0.7.2"
+  resolved "https://registry.yarnpkg.com/@floating-ui/react-dom/-/react-dom-0.7.2.tgz#0bf4ceccb777a140fc535c87eb5d6241c8e89864"
+  integrity sha512-1T0sJcpHgX/u4I1OzIEhlcrvkUN8ln39nz7fMoE/2HDHrPiMFoOGR7++GYyfUmIQHkkrTinaeQsO3XWubjSvGg==
+  dependencies:
+    "@floating-ui/dom" "^0.5.3"
+    use-isomorphic-layout-effect "^1.1.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"
@@ -5367,7 +5387,12 @@ cssstyle@^2.0.0:
   dependencies:
     cssom "~0.3.6"
 
-csstype@^2.5.2, csstype@^2.5.7, csstype@^3.0.2:
+csstype@^2.5.2, csstype@^2.5.7:
+  version "2.6.20"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.20.tgz#9229c65ea0b260cf4d3d997cb06288e36a8d6dda"
+  integrity sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA==
+
+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==
@@ -14549,6 +14574,11 @@ url@^0.11.0:
     punycode "1.3.2"
     querystring "0.2.0"
 
+use-isomorphic-layout-effect@^1.1.1:
+  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"

From 07ea2f6ba7a49865fff3b9b3b69745067d3e962c Mon Sep 17 00:00:00 2001
From: Nathan Bierema <nbierema@gmail.com>
Date: Mon, 4 Jul 2022 10:26:15 -0400
Subject: [PATCH 03/14] Make MenuPortal function component

---
 packages/react-select/src/components/Menu.tsx | 115 +++++++++---------
 1 file changed, 56 insertions(+), 59 deletions(-)

diff --git a/packages/react-select/src/components/Menu.tsx b/packages/react-select/src/components/Menu.tsx
index 8ce7891c8e..be1d63d233 100644
--- a/packages/react-select/src/components/Menu.tsx
+++ b/packages/react-select/src/components/Menu.tsx
@@ -5,6 +5,7 @@ import {
   ReactNode,
   RefCallback,
   ContextType,
+  useState,
 } from 'react';
 import { jsx } from '@emotion/react';
 import { createPortal } from 'react-dom';
@@ -539,10 +540,6 @@ export interface MenuPortalProps<
   menuPosition: MenuPosition;
 }
 
-interface MenuPortalState {
-  placement: 'bottom' | 'top' | null;
-}
-
 export interface PortalStyleArgs {
   offset: number;
   position: MenuPosition;
@@ -561,69 +558,69 @@ export const menuPortalCSS = ({
   zIndex: 1,
 });
 
-export class MenuPortal<
+export const MenuPortal = <
   Option,
   IsMulti extends boolean,
   Group extends GroupBase<Option>
-> extends Component<MenuPortalProps<Option, IsMulti, Group>, MenuPortalState> {
-  state: MenuPortalState = { placement: null };
+>(
+  props: MenuPortalProps<Option, IsMulti, Group>
+) => {
+  const [placementState, setPlacement] =
+    useState<'bottom' | 'top' | null>(null);
 
   // callback for occasions where the menu must "flip"
-  getPortalPlacement = ({ placement }: MenuState) => {
-    const initialPlacement = coercePlacement(this.props.menuPlacement);
+  const getPortalPlacement = ({ placement }: MenuState) => {
+    const initialPlacement = coercePlacement(props.menuPlacement);
 
     // avoid re-renders if the placement has not changed
-    if (placement !== initialPlacement) {
-      this.setState({ placement });
+    if (placementState !== initialPlacement) {
+      setPlacement(placement);
     }
   };
-  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;
-    }
-
-    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>
-    );
+  const {
+    appendTo,
+    children,
+    className,
+    controlElement,
+    cx,
+    innerProps,
+    menuPlacement,
+    menuPosition: position,
+    getStyles,
+  } = props;
+  const isFixed = position === 'fixed';
+
+  // bail early if required elements aren't present
+  if ((!appendTo && !isFixed) || !controlElement) {
+    return null;
   }
-}
+
+  const placement = placementState || 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 }}>
+      {appendTo ? createPortal(menuWrapper, appendTo) : menuWrapper}
+    </PortalPlacementContext.Provider>
+  );
+};

From ef0e08b96f739ee4c960f39adfd8035d7761e5ed Mon Sep 17 00:00:00 2001
From: Nathan Bierema <nbierema@gmail.com>
Date: Mon, 4 Jul 2022 10:31:04 -0400
Subject: [PATCH 04/14] Fix csstype resolution

---
 package.json |  2 +-
 yarn.lock    | 13 ++++---------
 2 files changed, 5 insertions(+), 10 deletions(-)

diff --git a/package.json b/package.json
index dcbe874a22..f173a0e5a7 100644
--- a/package.json
+++ b/package.json
@@ -176,6 +176,6 @@
     "./dist/react-select.esm.js": "./dist/react-select.browser.esm.js"
   },
   "resolutions": {
-    "csstype": "^3.0.2"
+    "csstype": "^3.1.0"
   }
 }
diff --git a/yarn.lock b/yarn.lock
index caea14c9e8..33435b9598 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5387,15 +5387,10 @@ cssstyle@^2.0.0:
   dependencies:
     cssom "~0.3.6"
 
-csstype@^2.5.2, csstype@^2.5.7:
-  version "2.6.20"
-  resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.20.tgz#9229c65ea0b260cf4d3d997cb06288e36a8d6dda"
-  integrity sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA==
-
-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==
+csstype@^2.5.2, csstype@^2.5.7, csstype@^3.0.2, csstype@^3.1.0:
+  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"

From 0e5b4e6556176dbaee7823b00efbf46d1796649d Mon Sep 17 00:00:00 2001
From: Nathan Bierema <nbierema@gmail.com>
Date: Mon, 4 Jul 2022 12:19:33 -0400
Subject: [PATCH 05/14] Update

---
 package.json                                  |   2 +-
 packages/react-select/package.json            |   5 +-
 packages/react-select/src/components/Menu.tsx | 132 +++++++++++++-----
 yarn.lock                                     |  14 +-
 4 files changed, 104 insertions(+), 49 deletions(-)

diff --git a/package.json b/package.json
index f173a0e5a7..dcbe874a22 100644
--- a/package.json
+++ b/package.json
@@ -176,6 +176,6 @@
     "./dist/react-select.esm.js": "./dist/react-select.browser.esm.js"
   },
   "resolutions": {
-    "csstype": "^3.1.0"
+    "csstype": "^3.0.2"
   }
 }
diff --git a/packages/react-select/package.json b/packages/react-select/package.json
index dc25476d46..0b677ba58c 100644
--- a/packages/react-select/package.json
+++ b/packages/react-select/package.json
@@ -13,11 +13,12 @@
     "@babel/runtime": "^7.12.0",
     "@emotion/cache": "^11.4.0",
     "@emotion/react": "^11.8.1",
-    "@floating-ui/react-dom": "^0.7.2",
+    "@floating-ui/dom": "^0.5.4",
     "@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 be1d63d233..6e8a200b1b 100644
--- a/packages/react-select/src/components/Menu.tsx
+++ b/packages/react-select/src/components/Menu.tsx
@@ -6,9 +6,13 @@ import {
   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,
@@ -16,7 +20,6 @@ import {
   getScrollParent,
   getScrollTop,
   normalizedHeight,
-  RectType,
   scrollTo,
 } from '../utils';
 import {
@@ -543,7 +546,7 @@ export interface MenuPortalProps<
 export interface PortalStyleArgs {
   offset: number;
   position: MenuPosition;
-  rect: RectType;
+  rect: { left: number; width: number };
 }
 
 export const menuPortalCSS = ({
@@ -558,54 +561,113 @@ export const menuPortalCSS = ({
   zIndex: 1,
 });
 
+export interface ComputedPosition {
+  offset: number;
+  rect: { left: number; width: number };
+}
+
 export const MenuPortal = <
   Option,
   IsMulti extends boolean,
   Group extends GroupBase<Option>
->(
-  props: MenuPortalProps<Option, IsMulti, Group>
-) => {
-  const [placementState, setPlacement] =
-    useState<'bottom' | 'top' | null>(null);
+>({
+  appendTo,
+  children,
+  className,
+  controlElement,
+  cx,
+  innerProps,
+  menuPlacement,
+  menuPosition,
+  getStyles,
+}: MenuPortalProps<Option, IsMulti, Group>) => {
+  const isFixed = menuPosition === 'fixed';
+
+  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"
-  const getPortalPlacement = ({ placement }: MenuState) => {
-    const initialPlacement = coercePlacement(props.menuPlacement);
+  const getPortalPlacement = useCallback(
+    ({ placement: updatedPlacement }: MenuState) => {
+      // avoid re-renders if the placement has not changed
+      if (updatedPlacement !== placement) {
+        setPlacement(placement);
+      }
+    },
+    [placement]
+  );
 
-    // avoid re-renders if the placement has not changed
-    if (placementState !== initialPlacement) {
-      setPlacement(placement);
+  const updateComputedPosition = useCallback(() => {
+    if (!controlElement) return;
+
+    const rect = getBoundingClientObj(controlElement);
+    const scrollDistance = isFixed ? 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 });
     }
-  };
-
-  const {
-    appendTo,
-    children,
-    className,
+  }, [
     controlElement,
-    cx,
-    innerProps,
-    menuPlacement,
-    menuPosition: position,
-    getStyles,
-  } = props;
-  const isFixed = position === 'fixed';
+    isFixed,
+    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;
+    }
 
-  // bail early if required elements aren't present
-  if ((!appendTo && !isFixed) || !controlElement) {
-    return null;
-  }
+    if (!isFixed && controlElement && menuPortalRef.current) {
+      cleanupRef.current = autoUpdate(
+        controlElement,
+        menuPortalRef.current,
+        updateComputedPosition
+      );
+    }
+  }, [controlElement, isFixed, updateComputedPosition]);
+
+  useLayoutEffect(() => {
+    runAutoUpdate();
+  }, [runAutoUpdate]);
+
+  const setMenuPortalElement = useCallback(
+    (menuPortalElement: HTMLDivElement) => {
+      menuPortalRef.current = menuPortalElement;
+      runAutoUpdate();
+    },
+    [runAutoUpdate]
+  );
 
-  const placement = placementState || coercePlacement(menuPlacement);
-  const rect = getBoundingClientObj(controlElement);
-  const scrollDistance = isFixed ? 0 : window.pageYOffset;
-  const offset = rect[placement] + scrollDistance;
-  const state = { offset, position, rect };
+  // bail early if required elements aren't present
+  if ((!appendTo && !isFixed) || !computedPosition) return null;
 
   // same wrapper element whether fixed or portalled
   const menuWrapper = (
     <div
-      css={getStyles('menuPortal', state)}
+      ref={setMenuPortalElement}
+      css={getStyles('menuPortal', {
+        offset: computedPosition.offset,
+        position: menuPosition,
+        rect: computedPosition.rect,
+      })}
       className={cx(
         {
           'menu-portal': true,
diff --git a/yarn.lock b/yarn.lock
index 33435b9598..94e94ef779 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1720,21 +1720,13 @@
   resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-0.7.3.tgz#d274116678ffae87f6b60e90f88cc4083eefab86"
   integrity sha512-buc8BXHmG9l82+OQXOFU3Kr2XQx9ys01U/Q9HMIrZ300iLc8HLMgh7dcCqgYzAzf4BkoQvDcXf5Y+CuEZ5JBYg==
 
-"@floating-ui/dom@^0.5.3":
+"@floating-ui/dom@^0.5.4":
   version "0.5.4"
   resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-0.5.4.tgz#4eae73f78bcd4bd553ae2ade30e6f1f9c73fe3f1"
   integrity sha512-419BMceRLq0RrmTSDxn8hf9R3VCJv2K9PUfugh5JyEFmdjzDo+e8U5EdR8nzKq8Yj1htzLm3b6eQEEam3/rrtg==
   dependencies:
     "@floating-ui/core" "^0.7.3"
 
-"@floating-ui/react-dom@^0.7.2":
-  version "0.7.2"
-  resolved "https://registry.yarnpkg.com/@floating-ui/react-dom/-/react-dom-0.7.2.tgz#0bf4ceccb777a140fc535c87eb5d6241c8e89864"
-  integrity sha512-1T0sJcpHgX/u4I1OzIEhlcrvkUN8ln39nz7fMoE/2HDHrPiMFoOGR7++GYyfUmIQHkkrTinaeQsO3XWubjSvGg==
-  dependencies:
-    "@floating-ui/dom" "^0.5.3"
-    use-isomorphic-layout-effect "^1.1.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"
@@ -5387,7 +5379,7 @@ cssstyle@^2.0.0:
   dependencies:
     cssom "~0.3.6"
 
-csstype@^2.5.2, csstype@^2.5.7, csstype@^3.0.2, csstype@^3.1.0:
+csstype@^2.5.2, csstype@^2.5.7, csstype@^3.0.2:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.0.tgz#4ddcac3718d787cf9df0d1b7d15033925c8f29f2"
   integrity sha512-uX1KG+x9h5hIJsaKR9xHUeUraxf8IODOwq9JLNPq6BwB04a/xgpq3rcx47l5BZu5zBPlgD342tdke3Hom/nJRA==
@@ -14569,7 +14561,7 @@ url@^0.11.0:
     punycode "1.3.2"
     querystring "0.2.0"
 
-use-isomorphic-layout-effect@^1.1.1:
+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==

From d838311b70d3373a46afb799c3c6a73709d1d80d Mon Sep 17 00:00:00 2001
From: Nathan Bierema <nbierema@gmail.com>
Date: Mon, 4 Jul 2022 12:20:35 -0400
Subject: [PATCH 06/14] Remove unnecessary export

---
 packages/react-select/src/components/Menu.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-select/src/components/Menu.tsx b/packages/react-select/src/components/Menu.tsx
index 6e8a200b1b..6d700b9b58 100644
--- a/packages/react-select/src/components/Menu.tsx
+++ b/packages/react-select/src/components/Menu.tsx
@@ -561,7 +561,7 @@ export const menuPortalCSS = ({
   zIndex: 1,
 });
 
-export interface ComputedPosition {
+interface ComputedPosition {
   offset: number;
   rect: { left: number; width: number };
 }

From a0c9c7d33fe40e80653b3a3790a69d8c0d2e5565 Mon Sep 17 00:00:00 2001
From: Nathan Bierema <nbierema@gmail.com>
Date: Mon, 4 Jul 2022 12:23:17 -0400
Subject: [PATCH 07/14] Avoid ResizeObserver

---
 packages/react-select/src/components/Menu.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/react-select/src/components/Menu.tsx b/packages/react-select/src/components/Menu.tsx
index 6d700b9b58..5349f368e5 100644
--- a/packages/react-select/src/components/Menu.tsx
+++ b/packages/react-select/src/components/Menu.tsx
@@ -639,7 +639,8 @@ export const MenuPortal = <
       cleanupRef.current = autoUpdate(
         controlElement,
         menuPortalRef.current,
-        updateComputedPosition
+        updateComputedPosition,
+        { elementResize: false }
       );
     }
   }, [controlElement, isFixed, updateComputedPosition]);

From 384fcbdc3705d1589e69bb1342f500fb10806d86 Mon Sep 17 00:00:00 2001
From: Nathan Bierema <nbierema@gmail.com>
Date: Mon, 4 Jul 2022 12:36:55 -0400
Subject: [PATCH 08/14] Create soft-bags-shave.md

---
 .changeset/soft-bags-shave.md | 5 +++++
 1 file changed, 5 insertions(+)
 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

From 3bf5e657a8bf41f1f2b63d48327ad504227aa880 Mon Sep 17 00:00:00 2001
From: Nathan Bierema <nbierema@gmail.com>
Date: Mon, 4 Jul 2022 14:00:02 -0400
Subject: [PATCH 09/14] Include fixed

---
 packages/react-select/src/components/Menu.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-select/src/components/Menu.tsx b/packages/react-select/src/components/Menu.tsx
index 5349f368e5..dd6b83e161 100644
--- a/packages/react-select/src/components/Menu.tsx
+++ b/packages/react-select/src/components/Menu.tsx
@@ -635,7 +635,7 @@ export const MenuPortal = <
       cleanupRef.current = null;
     }
 
-    if (!isFixed && controlElement && menuPortalRef.current) {
+    if (controlElement && menuPortalRef.current) {
       cleanupRef.current = autoUpdate(
         controlElement,
         menuPortalRef.current,

From b130dd6834f840e29ac2e79a5237f68cc7333f2e Mon Sep 17 00:00:00 2001
From: Nathan Bierema <nbierema@gmail.com>
Date: Mon, 4 Jul 2022 14:01:50 -0400
Subject: [PATCH 10/14] Update

---
 packages/react-select/src/components/Menu.tsx | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/packages/react-select/src/components/Menu.tsx b/packages/react-select/src/components/Menu.tsx
index dd6b83e161..df793adf26 100644
--- a/packages/react-select/src/components/Menu.tsx
+++ b/packages/react-select/src/components/Menu.tsx
@@ -581,8 +581,6 @@ export const MenuPortal = <
   menuPosition,
   getStyles,
 }: MenuPortalProps<Option, IsMulti, Group>) => {
-  const isFixed = menuPosition === 'fixed';
-
   const menuPortalRef = useRef<HTMLDivElement | null>(null);
   const cleanupRef = useRef<(() => void) | void | null>(null);
 
@@ -607,7 +605,7 @@ export const MenuPortal = <
     if (!controlElement) return;
 
     const rect = getBoundingClientObj(controlElement);
-    const scrollDistance = isFixed ? 0 : window.pageYOffset;
+    const scrollDistance = menuPosition === 'fixed' ? 0 : window.pageYOffset;
     const offset = rect[placement] + scrollDistance;
     if (
       offset !== computedPosition?.offset ||
@@ -618,7 +616,7 @@ export const MenuPortal = <
     }
   }, [
     controlElement,
-    isFixed,
+    menuPosition,
     placement,
     computedPosition?.offset,
     computedPosition?.rect.left,
@@ -643,7 +641,7 @@ export const MenuPortal = <
         { elementResize: false }
       );
     }
-  }, [controlElement, isFixed, updateComputedPosition]);
+  }, [controlElement, updateComputedPosition]);
 
   useLayoutEffect(() => {
     runAutoUpdate();
@@ -658,7 +656,7 @@ export const MenuPortal = <
   );
 
   // bail early if required elements aren't present
-  if ((!appendTo && !isFixed) || !computedPosition) return null;
+  if ((!appendTo && menuPosition !== 'fixed') || !computedPosition) return null;
 
   // same wrapper element whether fixed or portalled
   const menuWrapper = (

From f2f47f6402d9a73415950824d619de0ada954e3f Mon Sep 17 00:00:00 2001
From: Nathan Bierema <nbierema@gmail.com>
Date: Mon, 4 Jul 2022 16:47:49 -0400
Subject: [PATCH 11/14] Update

---
 packages/react-select/src/components/Menu.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/react-select/src/components/Menu.tsx b/packages/react-select/src/components/Menu.tsx
index df793adf26..ed3c67fc0c 100644
--- a/packages/react-select/src/components/Menu.tsx
+++ b/packages/react-select/src/components/Menu.tsx
@@ -637,8 +637,7 @@ export const MenuPortal = <
       cleanupRef.current = autoUpdate(
         controlElement,
         menuPortalRef.current,
-        updateComputedPosition,
-        { elementResize: false }
+        updateComputedPosition
       );
     }
   }, [controlElement, updateComputedPosition]);

From e87dc5acf877f40faaada387d1a4ba3870f4ef2b Mon Sep 17 00:00:00 2001
From: Nathan Bierema <nbierema@gmail.com>
Date: Sun, 11 Sep 2022 17:04:19 -0400
Subject: [PATCH 12/14] Fix

---
 packages/react-select/src/components/Menu.tsx | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

diff --git a/packages/react-select/src/components/Menu.tsx b/packages/react-select/src/components/Menu.tsx
index ed3c67fc0c..060db4cb2c 100644
--- a/packages/react-select/src/components/Menu.tsx
+++ b/packages/react-select/src/components/Menu.tsx
@@ -40,8 +40,8 @@ import {
 // Get Menu Placement
 // ------------------------------
 
-interface MenuState {
-  placement: CoercedMenuPlacement | null;
+interface CalculatedMenuPlacementAndHeight {
+  placement: CoercedMenuPlacement;
   maxHeight: number;
 }
 interface PlacementArgs {
@@ -62,10 +62,10 @@ 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;
@@ -292,9 +292,14 @@ 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,
@@ -592,10 +597,10 @@ export const MenuPortal = <
 
   // callback for occasions where the menu must "flip"
   const getPortalPlacement = useCallback(
-    ({ placement: updatedPlacement }: MenuState) => {
+    ({ placement: updatedPlacement }: CalculatedMenuPlacementAndHeight) => {
       // avoid re-renders if the placement has not changed
       if (updatedPlacement !== placement) {
-        setPlacement(placement);
+        setPlacement(updatedPlacement);
       }
     },
     [placement]

From 6965c79d9af2999b817af949cddb91edd7ea8b6f Mon Sep 17 00:00:00 2001
From: Nathan Bierema <nbierema@gmail.com>
Date: Sun, 11 Sep 2022 17:08:55 -0400
Subject: [PATCH 13/14] Bump @floating-ui/dom

---
 packages/react-select/package.json |  2 +-
 yarn.lock                          | 18 +++++++++---------
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/packages/react-select/package.json b/packages/react-select/package.json
index 0b677ba58c..80fcd56b9a 100644
--- a/packages/react-select/package.json
+++ b/packages/react-select/package.json
@@ -13,7 +13,7 @@
     "@babel/runtime": "^7.12.0",
     "@emotion/cache": "^11.4.0",
     "@emotion/react": "^11.8.1",
-    "@floating-ui/dom": "^0.5.4",
+    "@floating-ui/dom": "^1.0.1",
     "@types/react-transition-group": "^4.4.0",
     "memoize-one": "^5.0.0",
     "prop-types": "^15.6.0",
diff --git a/yarn.lock b/yarn.lock
index 94e94ef779..9c4453bfa0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1715,17 +1715,17 @@
     minimatch "^3.0.4"
     strip-json-comments "^3.1.1"
 
-"@floating-ui/core@^0.7.3":
-  version "0.7.3"
-  resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-0.7.3.tgz#d274116678ffae87f6b60e90f88cc4083eefab86"
-  integrity sha512-buc8BXHmG9l82+OQXOFU3Kr2XQx9ys01U/Q9HMIrZ300iLc8HLMgh7dcCqgYzAzf4BkoQvDcXf5Y+CuEZ5JBYg==
+"@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@^0.5.4":
-  version "0.5.4"
-  resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-0.5.4.tgz#4eae73f78bcd4bd553ae2ade30e6f1f9c73fe3f1"
-  integrity sha512-419BMceRLq0RrmTSDxn8hf9R3VCJv2K9PUfugh5JyEFmdjzDo+e8U5EdR8nzKq8Yj1htzLm3b6eQEEam3/rrtg==
+"@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" "^0.7.3"
+    "@floating-ui/core" "^1.0.1"
 
 "@istanbuljs/load-nyc-config@^1.0.0":
   version "1.1.0"

From 8ea1f7f449bc0968fe7d357fd2ee2d622ffab9cf Mon Sep 17 00:00:00 2001
From: Nathan Bierema <nbierema@gmail.com>
Date: Sun, 11 Sep 2022 17:16:46 -0400
Subject: [PATCH 14/14] Format

---
 packages/react-select/src/components/Menu.tsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/react-select/src/components/Menu.tsx b/packages/react-select/src/components/Menu.tsx
index 060db4cb2c..ac98727a93 100644
--- a/packages/react-select/src/components/Menu.tsx
+++ b/packages/react-select/src/components/Menu.tsx
@@ -65,7 +65,10 @@ export function getMenuPlacement({
 }: PlacementArgs): CalculatedMenuPlacementAndHeight {
   const { spacing } = theme;
   const scrollParent = getScrollParent(menuEl!);
-  const defaultState: CalculatedMenuPlacementAndHeight = { placement: 'bottom', maxHeight };
+  const defaultState: CalculatedMenuPlacementAndHeight = {
+    placement: 'bottom',
+    maxHeight,
+  };
 
   // something went wrong, return default state
   if (!menuEl || !menuEl.offsetParent) return defaultState;
@@ -292,7 +295,9 @@ export const menuCSS = <
 });
 
 const PortalPlacementContext = createContext<{
-  getPortalPlacement: ((menuState: CalculatedMenuPlacementAndHeight) => void) | null;
+  getPortalPlacement:
+    | ((menuState: CalculatedMenuPlacementAndHeight) => void)
+    | null;
 }>({ getPortalPlacement: null });
 
 interface MenuState {