From 1edfd7e1e154545381146fe46f29cbab7c6d1d85 Mon Sep 17 00:00:00 2001
From: "Michael S. Molina" <70410625+michael-s-molina@users.noreply.github.com>
Date: Thu, 8 Dec 2022 12:03:19 -0500
Subject: [PATCH] fix: DropdownContainer items width calculation (#22371)

---
 .../components/DropdownContainer/index.tsx    | 26 +++++++++----------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/superset-frontend/src/components/DropdownContainer/index.tsx b/superset-frontend/src/components/DropdownContainer/index.tsx
index e9ccffee5ea0..096e1b592241 100644
--- a/superset-frontend/src/components/DropdownContainer/index.tsx
+++ b/superset-frontend/src/components/DropdownContainer/index.tsx
@@ -167,25 +167,25 @@ const DropdownContainer = forwardRef(
       [items, overflowingIndex],
     );
 
-    useEffect(() => {
-      if (itemsWidth.length !== items.length) {
-        const container = current?.children.item(0);
-        if (container) {
-          const { children } = container;
-          const childrenArray = Array.from(children);
-          setItemsWidth(
-            childrenArray.map(child => child.getBoundingClientRect().width),
-          );
-        }
-      }
-    }, [current?.children, items.length, itemsWidth.length]);
-
     useLayoutEffect(() => {
       const container = current?.children.item(0);
       if (container) {
         const { children } = container;
         const childrenArray = Array.from(children);
 
+        // If items length change, add all items to the container
+        // and recalculate the widths
+        if (itemsWidth.length !== items.length) {
+          if (childrenArray.length === items.length) {
+            setItemsWidth(
+              childrenArray.map(child => child.getBoundingClientRect().width),
+            );
+          } else {
+            setOverflowingIndex(-1);
+            return;
+          }
+        }
+
         // Calculates the index of the first overflowed element
         // +1 is to give at least one pixel of difference and avoid flakiness
         const index = childrenArray.findIndex(