From cd6ce2c313453a09aa799dea341435f8df87dd2b Mon Sep 17 00:00:00 2001
From: Khavin Shankar <khavinshankar@gmail.com>
Date: Thu, 23 May 2024 14:50:01 +0530
Subject: [PATCH] fix placeholder overlapping in search input (#7865)

---
 src/Components/Form/SearchInput.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/Components/Form/SearchInput.tsx b/src/Components/Form/SearchInput.tsx
index e64aad207d1..2d146837ebf 100644
--- a/src/Components/Form/SearchInput.tsx
+++ b/src/Components/Form/SearchInput.tsx
@@ -80,7 +80,7 @@ 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>
@@ -88,7 +88,7 @@ const SearchInput = ({
       }
       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>