Merge pull request #232 from easyops-cn/steve/clear-btn-on-mobile

fix: hide clear button on small screen when input is not focused
easyops-cn · Jul 20, 2022 · 65f8a26 · 65f8a26
2 parents c15ae08 + c69fbf6
commit 65f8a26
Show file tree

Hide file tree

Showing 2 changed files with 6 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
@@ -237,6 +237,7 @@ html[data-theme="dark"] .noResultsIcon {
 }
 
 @media (max-width: 576px) {
+  .searchBarContainer:not(.focused) .searchClearButton,
   .searchHintContainer {
     display: none;
   }

diff --git a/docusaurus-search-local/src/client/theme/SearchBar/SearchBar.tsx b/docusaurus-search-local/src/client/theme/SearchBar/SearchBar.tsx
@@ -229,13 +229,17 @@ export default function SearchBar({
     });
   }, [location.search, location.pathname]);
 
+  const [focused, setFocused] = useState(false);
+
   const onInputFocus = useCallback(() => {
     focusAfterIndexLoaded.current = true;
     loadIndex();
+    setFocused(true);
     handleSearchBarToggle?.(true);
   }, [handleSearchBarToggle, loadIndex]);
 
   const onInputBlur = useCallback(() => {
+    setFocused(false);
     handleSearchBarToggle?.(false);
   }, [handleSearchBarToggle]);
 
@@ -300,6 +304,7 @@ export default function SearchBar({
     <div
       className={clsx("navbar__search", styles.searchBarContainer, {
         [styles.searchIndexLoading]: loading && inputChanged,
+        [styles.focused]: focused,
       })}
     >
       <input