@easyops-cn/docusaurus-search-local 0.29.2 → 0.29.3

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [0.29.3](https://github.com/easyops-cn/docusaurus-search-local/compare/v0.29.2...v0.29.3) (2022-07-20)
+
+
+### Bug Fixes
+
+* hide clear button on small screen when input is not focused ([c69fbf6](https://github.com/easyops-cn/docusaurus-search-local/commit/c69fbf64ff6ba11c32e63d89dada010bb1e521dc)), closes [#230](https://github.com/easyops-cn/docusaurus-search-local/issues/230)
+
 ## [0.29.2](https://github.com/easyops-cn/docusaurus-search-local/compare/v0.29.1...v0.29.2) (2022-07-19)
 
 

package/dist/client/client/theme/SearchBar/SearchBar.jsx

@@ -178,12 +178,15 @@ export default function SearchBar({ handleSearchBarToggle, }) {
             search.current?.autocomplete.setVal(keywords.join(" "));
         });
     }, [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]);
     const onInputMouseEnter = useCallback(() => {
@@ -232,6 +235,7 @@ export default function SearchBar({ handleSearchBarToggle, }) {
     }, [location.pathname, location.search, location.hash, history]);
     return (<div className={clsx("navbar__search", styles.searchBarContainer, {
             [styles.searchIndexLoading]: loading && inputChanged,
+            [styles.focused]: focused,
         })}>
       <input placeholder={translate({
             id: "theme.SearchBar.label",

package/dist/client/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;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@easyops-cn/docusaurus-search-local",
-  "version": "0.29.2",
+  "version": "0.29.3",
   "description": "An offline/local search plugin for Docusaurus v2",
   "repository": "https://github.com/easyops-cn/docusaurus-search-local",
   "homepage": "https://github.com/easyops-cn/docusaurus-search-local",