From 05b1f8683fe04fbb01e403b6ce2946be80946b2e Mon Sep 17 00:00:00 2001
From: Sydney Jodon <sydney.jodon@workiva.com>
Date: Tue, 13 Dec 2022 14:18:49 -0700
Subject: [PATCH 1/2] [PopperUnstyled] Call resolveAnchorEl on anchorEl before
 setting tooltipAnchorEl

---
 .../mui-base/src/PopperUnstyled/PopperUnstyled.js    | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/packages/mui-base/src/PopperUnstyled/PopperUnstyled.js b/packages/mui-base/src/PopperUnstyled/PopperUnstyled.js
index 78d0b83e78ce7a..ddcdfd1320eae0 100644
--- a/packages/mui-base/src/PopperUnstyled/PopperUnstyled.js
+++ b/packages/mui-base/src/PopperUnstyled/PopperUnstyled.js
@@ -84,7 +84,7 @@ const PopperTooltip = React.forwardRef(function PopperTooltip(props, ref) {
    * modifiers.flip is essentially a flip for controlled/uncontrolled behavior
    */
   const [placement, setPlacement] = React.useState(rtlPlacement);
-  const [tooltipAnchorEl, setTooltipAnchorEl] = React.useState(anchorEl);
+  const [tooltipAnchorEl, setTooltipAnchorEl] = React.useState(resolveAnchorEl(anchorEl));
 
   React.useEffect(() => {
     if (popperRef.current) {
@@ -94,7 +94,7 @@ const PopperTooltip = React.forwardRef(function PopperTooltip(props, ref) {
 
   React.useEffect(() => {
     if (anchorEl) {
-      setTooltipAnchorEl(anchorEl);
+      setTooltipAnchorEl(resolveAnchorEl(anchorEl));
     }
   }, [anchorEl]);
 
@@ -107,11 +107,9 @@ const PopperTooltip = React.forwardRef(function PopperTooltip(props, ref) {
       setPlacement(data.placement);
     };
 
-    const resolvedAnchorEl = resolveAnchorEl(tooltipAnchorEl);
-
     if (process.env.NODE_ENV !== 'production') {
-      if (resolvedAnchorEl && resolvedAnchorEl.nodeType === 1) {
-        const box = resolvedAnchorEl.getBoundingClientRect();
+      if (tooltipAnchorEl && tooltipAnchorEl.nodeType === 1) {
+        const box = tooltipAnchorEl.getBoundingClientRect();
 
         if (
           process.env.NODE_ENV !== 'test' &&
@@ -161,7 +159,7 @@ const PopperTooltip = React.forwardRef(function PopperTooltip(props, ref) {
       popperModifiers = popperModifiers.concat(popperOptions.modifiers);
     }
 
-    const popper = createPopper(resolveAnchorEl(tooltipAnchorEl), tooltipRef.current, {
+    const popper = createPopper(tooltipAnchorEl, tooltipRef.current, {
       placement: rtlPlacement,
       ...popperOptions,
       modifiers: popperModifiers,

From c7ab9d2acda0996ed4e53478bec6748950291256 Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Tue, 20 Dec 2022 15:38:09 +0700
Subject: [PATCH 2/2] rename to resolvedAnchorElement

---
 .../src/PopperUnstyled/PopperUnstyled.js         | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/packages/mui-base/src/PopperUnstyled/PopperUnstyled.js b/packages/mui-base/src/PopperUnstyled/PopperUnstyled.js
index ddcdfd1320eae0..18a22c135cdc81 100644
--- a/packages/mui-base/src/PopperUnstyled/PopperUnstyled.js
+++ b/packages/mui-base/src/PopperUnstyled/PopperUnstyled.js
@@ -84,7 +84,9 @@ const PopperTooltip = React.forwardRef(function PopperTooltip(props, ref) {
    * modifiers.flip is essentially a flip for controlled/uncontrolled behavior
    */
   const [placement, setPlacement] = React.useState(rtlPlacement);
-  const [tooltipAnchorEl, setTooltipAnchorEl] = React.useState(resolveAnchorEl(anchorEl));
+  const [resolvedAnchorElement, setResolvedAnchorElement] = React.useState(
+    resolveAnchorEl(anchorEl),
+  );
 
   React.useEffect(() => {
     if (popperRef.current) {
@@ -94,12 +96,12 @@ const PopperTooltip = React.forwardRef(function PopperTooltip(props, ref) {
 
   React.useEffect(() => {
     if (anchorEl) {
-      setTooltipAnchorEl(resolveAnchorEl(anchorEl));
+      setResolvedAnchorElement(resolveAnchorEl(anchorEl));
     }
   }, [anchorEl]);
 
   useEnhancedEffect(() => {
-    if (!tooltipAnchorEl || !open) {
+    if (!resolvedAnchorElement || !open) {
       return undefined;
     }
 
@@ -108,8 +110,8 @@ const PopperTooltip = React.forwardRef(function PopperTooltip(props, ref) {
     };
 
     if (process.env.NODE_ENV !== 'production') {
-      if (tooltipAnchorEl && tooltipAnchorEl.nodeType === 1) {
-        const box = tooltipAnchorEl.getBoundingClientRect();
+      if (resolvedAnchorElement && resolvedAnchorElement.nodeType === 1) {
+        const box = resolvedAnchorElement.getBoundingClientRect();
 
         if (
           process.env.NODE_ENV !== 'test' &&
@@ -159,7 +161,7 @@ const PopperTooltip = React.forwardRef(function PopperTooltip(props, ref) {
       popperModifiers = popperModifiers.concat(popperOptions.modifiers);
     }
 
-    const popper = createPopper(tooltipAnchorEl, tooltipRef.current, {
+    const popper = createPopper(resolvedAnchorElement, tooltipRef.current, {
       placement: rtlPlacement,
       ...popperOptions,
       modifiers: popperModifiers,
@@ -171,7 +173,7 @@ const PopperTooltip = React.forwardRef(function PopperTooltip(props, ref) {
       popper.destroy();
       handlePopperRefRef.current(null);
     };
-  }, [tooltipAnchorEl, disablePortal, modifiers, open, popperOptions, rtlPlacement]);
+  }, [resolvedAnchorElement, disablePortal, modifiers, open, popperOptions, rtlPlacement]);
 
   const childProps = { placement };