fix placeholder overlapping in search input (#7865)

ohcnetwork · May 23, 2024 · cd6ce2c · cd6ce2c
1 parent a9530a9
commit cd6ce2c
Showing 1 changed file with 2 additions and 2 deletions.
diff --git a/src/Components/Form/SearchInput.tsx b/src/Components/Form/SearchInput.tsx
@@ -80,15 +80,15 @@ const SearchInput = ({
         props.trailing ||
         (!props.secondary && (
           <div className="absolute inset-y-0 right-0 hidden py-1.5 pr-1.5 md:flex">
-            <kbd className="inline-flex items-center rounded border border-gray-200 px-2 font-sans text-sm font-medium text-gray-500">
+            <kbd className="inline-flex items-center rounded border border-gray-200 bg-white px-2 font-sans text-sm font-medium text-gray-500 focus:opacity-0">
               {shortcutKeyIcon}
             </kbd>
           </div>
         ))
       }
       trailingFocused={
         <div className="absolute inset-y-0 right-0 hidden gap-1 py-1.5 pr-1.5 md:flex">
-          <kbd className="inline-flex items-center rounded border border-gray-200 px-2 font-sans text-sm font-medium text-gray-500">
+          <kbd className="inline-flex items-center rounded border border-gray-200 bg-white px-2 font-sans text-sm font-medium text-gray-500">
             Esc
           </kbd>
         </div>