fix(ui): hack to close chakra tooltips on drag

invokeai/frontend/web/src/app/components/GlobalHookIsolator.tsx

@@ -8,6 +8,7 @@ import { appStarted } from 'app/store/middleware/listenerMiddleware/listeners/ap
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import type { PartialAppConfig } from 'app/types/invokeai';
 import { useFocusRegionWatcher } from 'common/hooks/focus';
+import { useCloseChakraTooltipsOnDragFix } from 'common/hooks/useCloseChakraTooltipsOnDragFix';
 import { useGlobalHotkeys } from 'common/hooks/useGlobalHotkeys';
 import { useDynamicPromptsWatcher } from 'features/dynamicPrompts/hooks/useDynamicPromptsWatcher';
 import { toggleImageViewer } from 'features/gallery/components/ImageViewer/useImageViewer';
@@ -43,6 +44,7 @@ export const GlobalHookIsolator = memo(
     useGlobalHotkeys();
     useGetOpenAPISchemaQuery();
     useSyncLoggingConfig();
+    useCloseChakraTooltipsOnDragFix();
 
     // Persistent subscription to the queue counts query - canvas relies on this to know if there are pending
     // and/or in progress canvas sessions.

invokeai/frontend/web/src/common/hooks/useCloseChakraTooltipsOnDragFix.ts

@@ -0,0 +1,19 @@
+import { useEffect } from 'react';
+
+// Chakra tooltips sometimes open during a drag operation. We can fix it by dispatching an event that chakra listens
+// for to close tooltips. It's reaching into the internals but it seems to work.
+
+const closeEventName = 'chakra-ui:close-tooltip';
+
+export const useCloseChakraTooltipsOnDragFix = () => {
+  useEffect(() => {
+    const closeTooltips = () => {
+      document.dispatchEvent(new window.CustomEvent(closeEventName));
+    };
+    document.addEventListener('drag', closeTooltips);
+
+    return () => {
+      document.removeEventListener('drag', closeTooltips);
+    };
+  }, []);
+};