diff --git a/src/components/FeatherIcon.js b/src/components/FeatherIcon.js
index 6c86ddaa5..606415176 100644
--- a/src/components/FeatherIcon.js
+++ b/src/components/FeatherIcon.js
@@ -18,7 +18,7 @@ const FeatherIcon = ({ className, name, size = '1em' }) => {
   ) : null;
 };
 
-// Icons from
+// Icons from https://feathericons.com/
 const ICONS = {
   'book-open': (
     <>
diff --git a/src/components/SearchInput.js b/src/components/SearchInput.js
index 6eddcee13..3807a5306 100644
--- a/src/components/SearchInput.js
+++ b/src/components/SearchInput.js
@@ -14,19 +14,22 @@ const SearchInput = ({ className, onClear, value, ...props }) => {
   };
   return (
     <div className={cx(styles.container, className)}>
-      <input value={value} {...props} className={styles.input} type="text" />
-      <span
+      <input
+        value={value}
+        {...props}
+        className={styles.input}
+        type="text"
+        onKeyDown={handleKeyDown}
+      />
+      <div
         role="button"
         tabIndex={0}
-        onKeyDown={handleKeyDown}
         onClick={handleClick}
         className={styles.clearButton}
+        onKeyDown={(e) => e.preventDefault()}
       >
-        <FeatherIcon
-          name={value !== '' ? 'x' : 'search'}
-          className={styles.icon}
-        />
-      </span>
+        <FeatherIcon name={value ? 'x' : 'search'} className={styles.icon} />
+      </div>
     </div>
   );
 };