diff --git a/invokeai/frontend/web/src/app/components/GlobalHookIsolator.tsx b/invokeai/frontend/web/src/app/components/GlobalHookIsolator.tsx index ef45771119..17bb4f4ce4 100644 --- a/invokeai/frontend/web/src/app/components/GlobalHookIsolator.tsx +++ b/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. diff --git a/invokeai/frontend/web/src/common/hooks/useCloseChakraTooltipsOnDragFix.ts b/invokeai/frontend/web/src/common/hooks/useCloseChakraTooltipsOnDragFix.ts new file mode 100644 index 0000000000..79a92398d7 --- /dev/null +++ b/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); + }; + }, []); +};