chore: fix search bar focus handling (#2932)

packages/web/src/javascripts/Components/SearchBar/SearchBar.tsx

@@ -1,6 +1,6 @@
 import { ItemListController } from '@/Controllers/ItemList/ItemListController'
 import { KeyboardKey } from '@standardnotes/ui-services'
-import { useState, useCallback, KeyboardEventHandler, useRef } from 'react'
+import { useCallback, KeyboardEventHandler, useRef } from 'react'
 import SearchOptions from '@/Components/SearchOptions/SearchOptions'
 import { SearchOptionsController } from '@/Controllers/SearchOptionsController'
 import Icon from '../Icon/Icon'
@@ -8,6 +8,7 @@ import DecoratedInput from '../Input/DecoratedInput'
 import { observer } from 'mobx-react-lite'
 import ClearInputButton from '../ClearInputButton/ClearInputButton'
 import { ElementIds } from '@/Constants/ElementIDs'
+import { classNames } from '@standardnotes/snjs'
 
 type Props = {
   itemListController: ItemListController
@@ -16,12 +17,11 @@ type Props = {
 }
 
 const SearchBar = ({ itemListController, searchOptionsController, hideOptions = false }: Props) => {
+  const searchBarRef = useRef<HTMLDivElement>(null)
   const searchInputRef = useRef<HTMLInputElement>(null)
 
   const { noteFilterText, setNoteFilterText, clearFilterText, onFilterEnter } = itemListController
 
-  const [focusedSearch, setFocusedSearch] = useState(false)
-
   const onNoteFilterTextChange = useCallback(
     (text: string) => {
       setNoteFilterText(text)
@@ -38,16 +38,13 @@ const SearchBar = ({ itemListController, searchOptionsController, hideOptions =
     [onFilterEnter],
   )
 
-  const onSearchFocus = useCallback(() => setFocusedSearch(true), [])
-  const onSearchBlur = useCallback(() => setFocusedSearch(false), [])
-
   const onClearSearch = useCallback(() => {
     clearFilterText()
     searchInputRef.current?.focus()
   }, [clearFilterText])
 
   return (
-    <div className="pb-0.5 pt-3" role="search">
+    <div className="group pb-0.5 pt-3" role="search" ref={searchBarRef}>
       <DecoratedInput
         autocomplete={false}
         id={ElementIds.SearchBar}
@@ -58,20 +55,21 @@ const SearchBar = ({ itemListController, searchOptionsController, hideOptions =
         placeholder={'Search...'}
         value={noteFilterText}
         ref={searchInputRef}
-        onBlur={onSearchBlur}
         onChange={onNoteFilterTextChange}
-        onFocus={onSearchFocus}
         onKeyUp={onNoteFilterKeyUp}
         left={[<Icon type="search" className="mr-1 h-4.5 w-4.5 flex-shrink-0 text-passive-1" />]}
         right={[noteFilterText && <ClearInputButton onClick={onClearSearch} />]}
         roundedFull
       />
 
-      {(focusedSearch || noteFilterText) && !hideOptions && (
+      <div
-        <div className="animate-fade-from-top">
+        className={classNames(
-          <SearchOptions searchOptions={searchOptionsController} />
+          'animate-fade-from-top',
-        </div>
+          hideOptions ? 'hidden' : !noteFilterText && 'hidden group-focus-within:flex',
-      )}
+        )}
+      >
+        <SearchOptions searchOptions={searchOptionsController} />
+      </div>
     </div>
   )
 }