Clean up filter boxes

packages/web/components/filter.tsx

@@ -89,7 +89,7 @@ export function FilterList({
   function updateFilter(originalPhrase: string) {
     let foundExactMatch = false;
     let results = fuzzySorter(originalPhrase, options);
-    if (allowNew && !foundExactMatch) {
+    if (allowNew && !foundExactMatch && originalPhrase) {
       results.push({
         name: originalPhrase,
         hint: newHint,
@@ -121,6 +121,8 @@ export function FilterList({
     };
   }, []);
 
+  let exiting = false;
+
   const returnEl = (
     <div className="filter-wrapper">
       <div className="filter-box">
@@ -133,7 +135,9 @@ export function FilterList({
             ref={searchBoxRef}
             onChange={filterUpdate}
             onBlur={(e) => {
-              searchBoxRef.current!.focus();
+              if (!exiting) {
+                searchBoxRef.current!.focus();
+              }
             }}
             onKeyDown={(e: React.KeyboardEvent) => {
               // console.log("Key up", e);
@@ -150,10 +154,24 @@ export function FilterList({
                   );
                   break;
                 case "Enter":
+                  exiting = true;
                   onSelect(matchingOptions[selectedOption]);
                   e.preventDefault();
                   break;
+                case "PageUp":
+                  setSelectionOption(Math.max(0, selectedOption - 5));
+                  break;
+                case "PageDown":
+                  setSelectionOption(Math.max(0, selectedOption + 5));
+                  break;
+                case "Home":
+                  setSelectionOption(0);
+                  break;
+                case "End":
+                  setSelectionOption(matchingOptions.length - 1);
+                  break;
                 case "Escape":
+                  exiting = true;
                   onSelect(undefined);
                   break;
                 case " ":

packages/web/styles/filter_box.scss

@@ -10,7 +10,7 @@
   top: 0;
   bottom: 0;
   max-height: 290px;
-  overflow: hide;
+  // overflow: hide;
   z-index: 100;
 }
 
@@ -19,7 +19,8 @@
   background-color: #fff;
   border: rgb(103, 103, 103) 1px solid;
   border-radius: 8px;
-  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
+  box-shadow: rgba(0, 0, 0, 0.35) 0px 20px 20px;
+  overflow: hidden;
   margin: 10px;
 
   .header {
@@ -55,7 +56,7 @@
   }
 
   .result-list {
-    max-height: 200px;
+    max-height: 216px;
     overflow-y: scroll;
 
     .icon {
@@ -70,11 +71,14 @@
   .selected-option {
     padding: 8px;
     cursor: pointer;
+    height: 20px;
+    line-height: 20px;
   }
 
   .selected-option {
     background-color: var(--highlight-color);
     color: #eee;
+    // border-radius: 5px;
   }
 
   .option .hint,