From 459673b53942f03e3f28f9a092a20a1334670c7a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Fri, 10 May 2024 14:06:53 +0200
Subject: [PATCH] Dropdown: Fixes double call to onVisibilityChange (#87607)

* Dropdown: Fixes double call to onVisibilityChange

* Update

* update
---
 .../src/components/Dropdown/Dropdown.tsx           | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/packages/grafana-ui/src/components/Dropdown/Dropdown.tsx b/packages/grafana-ui/src/components/Dropdown/Dropdown.tsx
index 94cfac03fb9..051b8518622 100644
--- a/packages/grafana-ui/src/components/Dropdown/Dropdown.tsx
+++ b/packages/grafana-ui/src/components/Dropdown/Dropdown.tsx
@@ -10,7 +10,7 @@ import {
   useFloating,
   useInteractions,
 } from '@floating-ui/react';
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useCallback, useRef, useState } from 'react';
 import { CSSTransition } from 'react-transition-group';
 
 import { GrafanaTheme2 } from '@grafana/data';
@@ -34,9 +34,13 @@ export const Dropdown = React.memo(({ children, overlay, placement, offset, onVi
   const [show, setShow] = useState(false);
   const transitionRef = useRef(null);
 
-  useEffect(() => {
-    onVisibleChange?.(show);
-  }, [onVisibleChange, show]);
+  const handleOpenChange = useCallback(
+    (newState: boolean) => {
+      setShow(newState);
+      onVisibleChange?.(newState);
+    },
+    [onVisibleChange]
+  );
 
   // the order of middleware is important!
   const middleware = [
@@ -56,7 +60,7 @@ export const Dropdown = React.memo(({ children, overlay, placement, offset, onVi
   const { context, refs, floatingStyles } = useFloating({
     open: show,
     placement: getPlacement(placement),
-    onOpenChange: setShow,
+    onOpenChange: handleOpenChange,
     middleware,
     whileElementsMounted: autoUpdate,
   });