From 1733ddcfed3de57aaf1dc62730f8818a98ad2e7d Mon Sep 17 00:00:00 2001
From: Colin <colinb969@gmail.com>
Date: Thu, 1 Aug 2024 09:50:26 +0100
Subject: [PATCH] fix: Hoist selected dropdown values to top lazily

---
 src/renderer/components/SearchBar.tsx | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/renderer/components/SearchBar.tsx b/src/renderer/components/SearchBar.tsx
index a0d49033f..ce1a0845c 100644
--- a/src/renderer/components/SearchBar.tsx
+++ b/src/renderer/components/SearchBar.tsx
@@ -179,10 +179,10 @@ export function SearchBar() {
               value: event.orderReverse
             }));
           }}/>
-        <SimpleButton
-          style={{ height: '100%' }}
-          value={expanded ? 'Hide Filters' : 'Show Filters'}
-          onClick={() => setExpanded(!expanded)}/>
+        {/* <SimpleButton */}
+        {/*   style={{ height: '100%' }} */}
+        {/*   value={expanded ? 'Hide Filters' : 'Show Filters'} */}
+        {/*   onClick={() => setExpanded(!expanded)}/> */}
       </div>
       { expanded &&
          (
@@ -362,9 +362,15 @@ function SearchableSelectDropdown<T extends SearchableSelectItem>(props: Searcha
   const [search, setSearch] = React.useState('');
   const [storedItems, setStoredItems] = React.useState(items); // 'cache' the items
 
+  // Split the items into 2 halves - Selected and not selected, then merge
+
   const filteredItems = React.useMemo(() => {
     const lowerSearch = search.toLowerCase().replace(' ', '');
-    return storedItems.filter((item) => item.orderVal.toLowerCase().replace(' ', '').includes(lowerSearch));
+
+    return [
+      ...storedItems.filter((item) => selected.includes(item.value) && item.orderVal.toLowerCase().includes(lowerSearch)),
+      ...storedItems.filter((item) => !selected.includes(item.value) && item.orderVal.toLowerCase().includes(lowerSearch)),
+    ];
   }, [search, storedItems]);
 
   // Update the stored items when all selections removed