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
easyops-cn · Jun 20, 2024 · 27c03e0 · 27c03e0
1 parent 7f58aa2
commit 27c03e0
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 0 deletions.
diff --git 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,21 @@ 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"] :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
@@ -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({