Search bar bug fixes

client/src/components/SearchBar/SearchBar.tsx

@@ -27,6 +27,11 @@ const SearchBar = (props: ComponentProps): JSX.Element => {
     inputRef.current.focus();
   }, []);
 
+  const clearSearch = () => {
+    inputRef.current.value = '';
+    setLocalSearch('');
+  };
+
   const searchHandler = (e: KeyboardEvent<HTMLInputElement>) => {
     const { isLocal, search, query, isURL, sameTab } = searchParser(
       inputRef.current.value
@@ -36,31 +41,39 @@ const SearchBar = (props: ComponentProps): JSX.Element => {
       setLocalSearch(search);
     }
 
-    if (e.code === 'Enter') {
+    if (e.code === 'Enter' || e.code === 'NumpadEnter') {
       if (!query.prefix) {
+        // Prefix not found -> emit notification
         createNotification({
           title: 'Error',
           message: 'Prefix not found',
         });
       } else if (isURL) {
+        // URL or IP passed -> redirect
         const url = urlParser(inputRef.current.value)[1];
         redirectUrl(url, sameTab);
       } else if (isLocal) {
+        // Local query -> filter apps and bookmarks
         setLocalSearch(search);
       } else {
+        // Valid query -> redirect to search results
         const url = `${query.template}${search}`;
         redirectUrl(url, sameTab);
       }
+    } else if (e.code === 'Escape') {
+      clearSearch();
     }
   };
 
   return (
-    <input
-      ref={inputRef}
-      type="text"
-      className={classes.SearchBar}
-      onKeyUp={(e) => searchHandler(e)}
-    />
+    <div className={classes.SearchContainer}>
+      <input
+        ref={inputRef}
+        type="text"
+        className={classes.SearchBar}
+        onKeyUp={(e) => searchHandler(e)}
+      />
+    </div>
   );
 };