Enable adding a custom browser search engine from the filter input

Fixes: darekkay/static-marks#30

src/components/filter/Filter.jsx

@@ -37,7 +37,13 @@ const Filter = ({ currentValue, applyFilter }) => {
   };
 
   return (
-    <div className="filter" role="search">
+    // using a form to enable adding a custom browser search engine from the filter input
+    <form
+      className="filter"
+      role="search"
+      // prevent site reloads
+      onSubmit={(event) => event.preventDefault()}
+    >
       <div className={cn("filter-button", { empty: !currentValue })}>
         <Button
           label="Clear filter"
@@ -48,14 +54,15 @@ const Filter = ({ currentValue, applyFilter }) => {
       </div>
       <input
         ref={(input) => input && input.focus()}
+        name="search"
         className="input"
         value={currentValue}
         placeholder="Search everywhere..."
         aria-label="Search everywhere"
         onChange={handleChange}
         type="search"
       />
-    </div>
+    </form>
   );
 };