From a5c7184c77929410732df022ebb3257bdb491074 Mon Sep 17 00:00:00 2001
From: weareoutman <wangshenwei@qq.com>
Date: Thu, 20 Jun 2024 12:14:37 +0800
Subject: [PATCH] fix: manually make the search bar be LTR even if in RTL

closes #423

By default, setting RTL will break the search bar style, for now, just manually  make the search bar be LTR even if setting RTL
---
 .../theme/SearchBar/SearchBar.module.css      | 20 +++++++++++++++++++
 .../src/client/theme/SearchBar/SearchBar.tsx  |  2 ++
 2 files changed, 22 insertions(+)

diff --git a/docusaurus-search-local/src/client/theme/SearchBar/SearchBar.module.css b/docusaurus-search-local/src/client/theme/SearchBar/SearchBar.module.css
index f4651ece..a4d89016 100644
--- a/docusaurus-search-local/src/client/theme/SearchBar/SearchBar.module.css
+++ b/docusaurus-search-local/src/client/theme/SearchBar/SearchBar.module.css
@@ -250,6 +250,26 @@ html[data-theme="dark"] .noResultsIcon {
   }
 }
 
+/* Manually make the search bar be LTR even if in RTL */
+html[dir="rtl"] .searchHintContainer {
+  right: auto;
+  left: 10px;
+}
+
+html[dir="rtl"] .searchBarContainer .searchClearButton {
+  right: auto;
+  left: 0.8rem;
+}
+
+html[dir="rtl"] .searchBarContainer .searchBarLoadingRing {
+  left: auto;
+  right: 10px;
+}
+
+html[dir="rtl"] :global(.navbar__search-input) {
+  padding: 0 2.25em 0 0.5em;
+}
+
 /* For autocomplete.js only. */
 .input {
 }
diff --git a/docusaurus-search-local/src/client/theme/SearchBar/SearchBar.tsx b/docusaurus-search-local/src/client/theme/SearchBar/SearchBar.tsx
index d325ead1..fc88be00 100644
--- a/docusaurus-search-local/src/client/theme/SearchBar/SearchBar.tsx
+++ b/docusaurus-search-local/src/client/theme/SearchBar/SearchBar.tsx
@@ -425,6 +425,8 @@ export default function SearchBar({
         [styles.focused]: focused,
       })}
       hidden={hidden}
+      // Manually make the search bar be LTR even if in RTL
+      dir="ltr"
     >
       <input
         placeholder={translate({