From f1c538fafca245cd5eea6f3c573373bb078f4ccb Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Wed, 9 Oct 2024 06:19:00 +1000
Subject: [PATCH] fix(ui): workflow sort popover behaviour

---
 .../WorkflowListMenu/WorkflowSortControl.tsx  | 48 ++++++++-----------
 1 file changed, 19 insertions(+), 29 deletions(-)

diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/WorkflowListMenu/WorkflowSortControl.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/WorkflowListMenu/WorkflowSortControl.tsx
index cd0bbbf879..199c1f19d5 100644
--- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/WorkflowListMenu/WorkflowSortControl.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/WorkflowListMenu/WorkflowSortControl.tsx
@@ -9,8 +9,6 @@ import {
   PopoverBody,
   PopoverContent,
   PopoverTrigger,
-  Tooltip,
-  useDisclosure,
 } from '@invoke-ai/ui-library';
 import { useStore } from '@nanostores/react';
 import { $projectId } from 'app/store/nanostores/projectId';
@@ -92,39 +90,31 @@ export const WorkflowSortControl = () => {
     [direction, DIRECTION_OPTIONS]
   );
 
-  const { isOpen, onToggle, onClose } = useDisclosure();
-
   return (
-    <>
-      <Tooltip label={`Sorting by ${valueOrderBy?.label} ${valueDirection?.label}`}>
+    <Popover placement="bottom">
+      <PopoverTrigger>
         <IconButton
+          tooltip={`Sorting by ${valueOrderBy?.label} ${valueDirection?.label}`}
           aria-label="Sort Workflow Librar"
           icon={direction === 'ASC' ? <PiSortAscendingBold /> : <PiSortDescendingBold />}
           variant="ghost"
-          onClick={onToggle}
         />
-      </Tooltip>
+      </PopoverTrigger>
 
-      <Popover placement="bottom" isOpen={isOpen} onClose={onClose} returnFocusOnClose={false} closeOnBlur={false}>
-        <PopoverTrigger>
-          <Flex></Flex>
-        </PopoverTrigger>
-
-        <PopoverContent>
-          <PopoverBody>
-            <Flex flexDir="column" gap={4}>
-              <FormControl orientation="horizontal" gap={1}>
-                <FormLabel>{t('common.orderBy')}</FormLabel>
-                <Combobox value={valueOrderBy} options={orderByOptions} onChange={onChangeOrderBy} />
-              </FormControl>
-              <FormControl orientation="horizontal" gap={1}>
-                <FormLabel>{t('common.direction')}</FormLabel>
-                <Combobox value={valueDirection} options={DIRECTION_OPTIONS} onChange={onChangeDirection} />
-              </FormControl>
-            </Flex>
-          </PopoverBody>
-        </PopoverContent>
-      </Popover>
-    </>
+      <PopoverContent>
+        <PopoverBody>
+          <Flex flexDir="column" gap={4}>
+            <FormControl orientation="horizontal" gap={1}>
+              <FormLabel>{t('common.orderBy')}</FormLabel>
+              <Combobox value={valueOrderBy} options={orderByOptions} onChange={onChangeOrderBy} />
+            </FormControl>
+            <FormControl orientation="horizontal" gap={1}>
+              <FormLabel>{t('common.direction')}</FormLabel>
+              <Combobox value={valueDirection} options={DIRECTION_OPTIONS} onChange={onChangeDirection} />
+            </FormControl>
+          </Flex>
+        </PopoverBody>
+      </PopoverContent>
+    </Popover>
   );
 };