Merge branch 'search-form' into beta

FreeFeed · Nov 7, 2024 · b275a2a · b275a2a
2 parents 4895be0 + b610d8f
commit b275a2a
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 12 deletions.
diff --git a/src/components/layout-header-search.jsx b/src/components/layout-header-search.jsx
@@ -1,13 +1,13 @@
 import cn from 'classnames';
+import { Link, withRouter } from 'react-router';
 import { faSearch, faSlidersH, faTimesCircle } from '@fortawesome/free-solid-svg-icons';
 import { useState, useEffect, useRef, useMemo } from 'react';
 import { useEvent } from 'react-use-event-hook';
-import { withRouter } from 'react-router';
+
 import { KEY_ESCAPE } from 'keycode-js';
 import styles from './layout-header.module.scss';
 import { Icon } from './fontawesome-icons';
 import { Autocomplete } from './autocomplete/autocomplete';
-import { ButtonLink } from './button-link';
 import { useMediaQuery } from './hooks/media-query';
 
 const autocompleteAnchor = /(^|[^a-z\d])@|((from|to|author|by|in|commented-?by|liked-?by):)/gi;
@@ -36,10 +36,7 @@ export const HeaderSearchForm = withRouter(function HeaderSearchForm({ router, c
     }
   });
 
-  const showAdvancedSearch = useEvent(() => {
-    router.push(`/search?q=${encodeURIComponent(query.trim())}&advanced`);
-    input.current.blur();
-  });
+  const advancedSearchClick = useEvent(() => document.activeElement?.blur());
 
   const onKeyDown = useEvent((e) => e.keyCode === KEY_ESCAPE && input.current.blur());
   const clearSearchForm = useEvent(() => (setQuery(''), input.current.focus()));
@@ -101,10 +98,14 @@ export const HeaderSearchForm = withRouter(function HeaderSearchForm({ router, c
             <Icon icon={faTimesCircle} />
           </button>
           <div className={styles.autocompleteBox}>
-            <ButtonLink tag="div" className={styles.advancedSearch} onClick={showAdvancedSearch}>
+            <Link
+              className={styles.advancedSearch}
+              to={`/search?q=${encodeURIComponent(query.trim())}&advanced`}
+              onClick={advancedSearchClick}
+            >
               <Icon icon={faSlidersH} className={styles.advancedSearchIcon} />
               <span>Advanced search options</span>
-            </ButtonLink>
+            </Link>
             <Autocomplete inputRef={input} context="search" anchor={autocompleteAnchor} />
           </div>
         </span>

diff --git a/src/components/layout-header.module.scss b/src/components/layout-header.module.scss
@@ -110,6 +110,7 @@ $without-sidebar: '(max-width: 991px)';
 
 .advancedSearch {
   position: absolute;
+  z-index: 1;
   top: 0;
   left: 0;
   width: 100%;
@@ -126,16 +127,22 @@ $without-sidebar: '(max-width: 991px)';
   translate: 0 0;
   transition: all 0.1s;
 
-  &:last-child {
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
+  &:is(*, :hover, :focus) {
+    // Reset the 'a' style
+    color: inherit;
+    text-decoration: none;
   }
 
   &:is(:hover, :focus) {
     background-color: #eee;
   }
 
+  &:last-child {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
   @starting-style {
     opacity: 0;
     translate: 0 -1em;