From 6c0516d0ee6fc277f9b44056c7b442b90a9ae0cd Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Mon, 4 Nov 2024 14:13:43 +1000
Subject: [PATCH] fix(ui): temp fix for stuck tooltips

---
 .../common/util/fixTooltipCloseOnScrollStyles.ts  | 15 +++++++++++++++
 .../components/Boards/BoardsList/BoardsList.tsx   |  3 ++-
 .../sidePanel/WorkflowListMenu/WorkflowList.tsx   |  3 ++-
 .../WorkflowListMenu/WorkflowListItem.tsx         |  6 +++++-
 .../stylePresets/components/StylePresetImage.tsx  |  1 +
 .../stylePresets/components/StylePresetList.tsx   |  3 ++-
 6 files changed, 27 insertions(+), 4 deletions(-)
 create mode 100644 invokeai/frontend/web/src/common/util/fixTooltipCloseOnScrollStyles.ts

diff --git a/invokeai/frontend/web/src/common/util/fixTooltipCloseOnScrollStyles.ts b/invokeai/frontend/web/src/common/util/fixTooltipCloseOnScrollStyles.ts
new file mode 100644
index 00000000000..1cb879e0b16
--- /dev/null
+++ b/invokeai/frontend/web/src/common/util/fixTooltipCloseOnScrollStyles.ts
@@ -0,0 +1,15 @@
+import type { CSSProperties } from 'react';
+
+/**
+ * Chakra's Tooltip's method of finding the nearest scroll parent has a problem - it assumes the first parent with
+ * `overflow: hidden` is the scroll parent. In this case, the Collapse component has that style, but isn't scrollable
+ * itself. The result is that the tooltip does not close on scroll, because the scrolling happens higher up in the DOM.
+ *
+ * As a hacky workaround, we can set the overflow to `visible`, which allows the scroll parent search to continue up to
+ * the actual scroll parent (in this case, the OverlayScrollbarsComponent in BoardsListWrapper).
+ *
+ * See: https://github.com/chakra-ui/chakra-ui/issues/7871#issuecomment-2453780958
+ */
+export const fixTooltipCloseOnScrollStyles: CSSProperties = {
+  overflow: 'visible',
+};
diff --git a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/BoardsList.tsx b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/BoardsList.tsx
index 0a325d37378..fbe21e22185 100644
--- a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/BoardsList.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/BoardsList.tsx
@@ -1,6 +1,7 @@
 import { Button, Collapse, Flex, Icon, Text, useDisclosure } from '@invoke-ai/ui-library';
 import { EMPTY_ARRAY } from 'app/store/constants';
 import { useAppSelector } from 'app/store/storeHooks';
+import { fixTooltipCloseOnScrollStyles } from 'common/util/fixTooltipCloseOnScrollStyles';
 import {
   selectBoardSearchText,
   selectListBoardsQueryArgs,
@@ -104,7 +105,7 @@ export const BoardsList = ({ isPrivate }: Props) => {
         )}
         <AddBoardButton isPrivateBoard={isPrivate} />
       </Flex>
-      <Collapse in={isOpen}>
+      <Collapse in={isOpen} style={fixTooltipCloseOnScrollStyles}>
         <Flex direction="column" gap={1}>
           {boardElements.length ? (
             boardElements
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/WorkflowListMenu/WorkflowList.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/WorkflowListMenu/WorkflowList.tsx
index ddd6fdaef7a..62eaf3316ce 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/WorkflowListMenu/WorkflowList.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/WorkflowListMenu/WorkflowList.tsx
@@ -2,6 +2,7 @@ import { Button, Collapse, Flex, Icon, Spinner, Text } from '@invoke-ai/ui-libra
 import { EMPTY_ARRAY } from 'app/store/constants';
 import { useAppSelector } from 'app/store/storeHooks';
 import { IAINoContentFallback } from 'common/components/IAIImageFallback';
+import { fixTooltipCloseOnScrollStyles } from 'common/util/fixTooltipCloseOnScrollStyles';
 import { useCategorySections } from 'features/nodes/hooks/useCategorySections';
 import {
   selectWorkflowOrderBy,
@@ -61,7 +62,7 @@ export const WorkflowList = ({ category }: { category: WorkflowCategory }) => {
           </Text>
         </Flex>
       </Button>
-      <Collapse in={isOpen}>
+      <Collapse in={isOpen} style={fixTooltipCloseOnScrollStyles}>
         {isLoading ? (
           <Flex alignItems="center" justifyContent="center" p={20}>
             <Spinner />
diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/WorkflowListMenu/WorkflowListItem.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/WorkflowListMenu/WorkflowListItem.tsx
index f31d3cdf085..ca1c235b85f 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/WorkflowListMenu/WorkflowListItem.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/WorkflowListMenu/WorkflowListItem.tsx
@@ -105,7 +105,7 @@ export const WorkflowListItem = ({ workflow }: { workflow: WorkflowRecordListIte
       onMouseOut={handleMouseOut}
       alignItems="center"
     >
-      <Tooltip label={<WorkflowListItemTooltip workflow={workflow} />}>
+      <Tooltip label={<WorkflowListItemTooltip workflow={workflow} />} closeOnScroll>
         <Flex flexDir="column" gap={1}>
           <Flex gap={4} alignItems="center">
             <Text noOfLines={2}>{workflow.name}</Text>
@@ -137,6 +137,7 @@ export const WorkflowListItem = ({ workflow }: { workflow: WorkflowRecordListIte
           label={t('workflows.edit')}
           // This prevents an issue where the tooltip isn't closed after the modal is opened
           isOpen={!isHovered ? false : undefined}
+          closeOnScroll
         >
           <IconButton
             size="sm"
@@ -150,6 +151,7 @@ export const WorkflowListItem = ({ workflow }: { workflow: WorkflowRecordListIte
           label={t('workflows.download')}
           // This prevents an issue where the tooltip isn't closed after the modal is opened
           isOpen={!isHovered ? false : undefined}
+          closeOnScroll
         >
           <IconButton
             size="sm"
@@ -164,6 +166,7 @@ export const WorkflowListItem = ({ workflow }: { workflow: WorkflowRecordListIte
             label={t('workflows.copyShareLink')}
             // This prevents an issue where the tooltip isn't closed after the modal is opened
             isOpen={!isHovered ? false : undefined}
+            closeOnScroll
           >
             <IconButton
               size="sm"
@@ -179,6 +182,7 @@ export const WorkflowListItem = ({ workflow }: { workflow: WorkflowRecordListIte
             label={t('workflows.delete')}
             // This prevents an issue where the tooltip isn't closed after the modal is opened
             isOpen={!isHovered ? false : undefined}
+            closeOnScroll
           >
             <IconButton
               size="sm"
diff --git a/invokeai/frontend/web/src/features/stylePresets/components/StylePresetImage.tsx b/invokeai/frontend/web/src/features/stylePresets/components/StylePresetImage.tsx
index b0a2a38bcf0..2610c86efaa 100644
--- a/invokeai/frontend/web/src/features/stylePresets/components/StylePresetImage.tsx
+++ b/invokeai/frontend/web/src/features/stylePresets/components/StylePresetImage.tsx
@@ -8,6 +8,7 @@ const FALLBACK_ICON_SIZE = '24px';
 const StylePresetImage = ({ presetImageUrl, imageWidth }: { presetImageUrl: string | null; imageWidth?: number }) => {
   return (
     <Tooltip
+      closeOnScroll
       label={
         presetImageUrl && (
           <Image
diff --git a/invokeai/frontend/web/src/features/stylePresets/components/StylePresetList.tsx b/invokeai/frontend/web/src/features/stylePresets/components/StylePresetList.tsx
index 9afcbbb8079..b54069b7c59 100644
--- a/invokeai/frontend/web/src/features/stylePresets/components/StylePresetList.tsx
+++ b/invokeai/frontend/web/src/features/stylePresets/components/StylePresetList.tsx
@@ -1,6 +1,7 @@
 import { Button, Collapse, Flex, Icon, Text, useDisclosure } from '@invoke-ai/ui-library';
 import { useAppSelector } from 'app/store/storeHooks';
 import { IAINoContentFallback } from 'common/components/IAIImageFallback';
+import { fixTooltipCloseOnScrollStyles } from 'common/util/fixTooltipCloseOnScrollStyles';
 import { selectStylePresetSearchTerm } from 'features/stylePresets/store/stylePresetSlice';
 import { useTranslation } from 'react-i18next';
 import { PiCaretDownBold } from 'react-icons/pi';
@@ -23,7 +24,7 @@ export const StylePresetList = ({ title, data }: { title: string; data: StylePre
           </Text>
         </Flex>
       </Button>
-      <Collapse in={isOpen}>
+      <Collapse in={isOpen} style={fixTooltipCloseOnScrollStyles}>
         {data.length ? (
           data.map((preset) => <StylePresetListItem preset={preset} key={preset.id} />)
         ) : (