Merge pull request #428 from easyops-cn/steve/rtl

fix: manually make the search bar be LTR even if in RTL

Author: weareoutman

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 {
 }

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({