fix: spotlight (after deleting all search text)

nickkelly-dev · May 4, 2022 · f83caed · f83caed
1 parent a71dd8d
commit f83caed
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 7 deletions.
diff --git a/src/components/Spotlight.tsx b/src/components/Spotlight.tsx
@@ -57,8 +57,6 @@ export default function Spotlight({
 
   useEffect(() => {
     updateAppList();
-    // don't show app details when there is no input
-    if (searchText === "") setCurDetails(null);
   }, [searchText]);
 
   useEffect(() => {
@@ -171,13 +169,13 @@ export default function Spotlight({
       <div>
         {app.appList.length !== 0 && (
           <div>
-            <div className="spotlight-category">Applications</div>
+            <div className="spotlight-type">Applications</div>
             <ul className="w-full text-xs">{app.appList}</ul>
           </div>
         )}
         {portfolio.appList.length !== 0 && (
           <div>
-            <div className="spotlight-category">Portfolio</div>
+            <div className="spotlight-type">Portfolio</div>
             <ul className="w-full text-xs">{portfolio.appList}</ul>
           </div>
         )}
@@ -195,7 +193,11 @@ export default function Spotlight({
   };
 
   const updateCurrentDetails = (): void => {
-    if (appIdList.length === 0) return;
+    if (appIdList.length === 0 || searchText === "") {
+      setCurDetails(null);
+      return;
+    }
+
     const appId = appIdList[selectedIndex];
     const elem = document.querySelector(`#spotlight-${appId}`) as HTMLElement;
     const id = appId;

diff --git a/src/styles/component.css b/src/styles/component.css
@@ -17,7 +17,7 @@
   @apply text-black opacity-40;
 }
 
-.spotlight .spotlight-category {
+.spotlight .spotlight-type {
   @apply flex-center-v pl-6 py-0.5 text-xs leading-none bg-gray-400 bg-opacity-80 text-black;
 }
 
@@ -29,7 +29,7 @@ html.dark .spotlight input::placeholder {
   @apply text-white opacity-40;
 }
 
-html.dark .spotlight .spotlight-category {
+html.dark .spotlight .spotlight-type {
   @apply bg-gray-500 bg-opacity-80 text-white;
 }