fix: exit search on blur [REACT-855] (#3013)

### 🎯 Goal

Enable `exitSearchOnBlur` in the demo application, adjust the behavior
accordingly (keep the search open if user clicks on filters or clear
button as that could be still considered within the bounds of the search
input behavior-wise).

Author: arnautov-anton

examples/vite/src/ChatLayout/Panels.tsx

@@ -7,6 +7,7 @@ import {
   ChannelAvatar,
   ChannelHeader,
   ChannelList,
+  ChannelSearchProps,
   ChatView,
   MessageInput,
   MessageList,
@@ -42,6 +43,10 @@ const ChannelThreadPanel = () => {
   );
 };
 
+const CustomChannelSearch = (props: ChannelSearchProps) => (
+  <Search {...props} exitSearchOnInputBlur />
+);
+
 export const ChannelsPanels = ({
   filters,
   initialChannelId,
@@ -65,7 +70,7 @@ export const ChannelsPanels = ({
         ref={channelsLayoutRef}
       >
         <ChannelList
-          ChannelSearch={Search}
+          ChannelSearch={CustomChannelSearch}
           Avatar={ChannelAvatar}
           customActiveChannel={initialChannelId}
           filters={filters}

src/components/EventComponent/EventComponent.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 
 import type { Event, LocalMessage } from 'stream-chat';
 import type { TimestampFormatterOptions } from '../../i18n/types';
-import { useTranslationContext } from '../../context';
 
 export type EventComponentProps = TimestampFormatterOptions & {
   message: LocalMessage & {

src/experimental/Search/Search.tsx

@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import React from 'react';
+import React, { useRef } from 'react';
 import type { SearchControllerState } from 'stream-chat';
 
 import { SearchBar as DefaultSearchBar } from './SearchBar/SearchBar';
@@ -17,10 +17,11 @@ const searchControllerStateSelector = (
 ): SearchControllerStateSelectorReturnValue => ({ isActive: nextValue.isActive });
 
 export type SearchProps = {
+  /** The type of channel to create on user result select, defaults to `messaging` */
   directMessagingChannelType?: string;
   /** Sets the input element into disabled state */
   disabled?: boolean;
-  /** Clear search state / results on every click outside the search input, defaults to false */
+  /** Clear the search state/results on every click outside the search input, defaults to `false` */
   exitSearchOnInputBlur?: boolean;
   /** Custom placeholder text to be displayed in the search input */
   placeholder?: string;
@@ -29,11 +30,13 @@ export type SearchProps = {
 export const Search = ({
   directMessagingChannelType = 'messaging',
   disabled,
-  exitSearchOnInputBlur,
+  exitSearchOnInputBlur = false,
   placeholder,
 }: SearchProps) => {
   const { SearchBar = DefaultSearchBar, SearchResults = DefaultSearchResults } =
     useComponentContext();
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const filterButtonsContainerRef = useRef<HTMLDivElement | null>(null);
 
   const { searchController } = useChatContext();
 
@@ -45,9 +48,11 @@ export const Search = ({
   return (
     <SearchContextProvider
       value={{
+        containerRef,
         directMessagingChannelType,
         disabled,
         exitSearchOnInputBlur,
+        filterButtonsContainerRef,
         placeholder,
         searchController,
       }}
@@ -57,6 +62,7 @@ export const Search = ({
           'str-chat__search--active': isActive,
         })}
         data-testid='search'
+        ref={containerRef}
       >
         <SearchBar />
         <SearchResults />

src/experimental/Search/SearchBar/SearchBar.tsx

@@ -16,9 +16,15 @@ const searchControllerStateSelector = (nextValue: SearchControllerState) => ({
 
 export const SearchBar = () => {
   const { t } = useTranslationContext();
-  const { disabled, exitSearchOnInputBlur, placeholder, searchController } =
-    useSearchContext();
+  const {
+    disabled,
+    exitSearchOnInputBlur,
+    filterButtonsContainerRef,
+    placeholder,
+    searchController,
+  } = useSearchContext();
   const queriesInProgress = useSearchQueriesInProgress(searchController);
+  const clearButtonRef = React.useRef<HTMLButtonElement | null>(null);
 
   const [input, setInput] = useState<HTMLInputElement | null>(null);
   const { isActive, searchQuery } = useStateStore(
@@ -53,8 +59,18 @@ export const SearchBar = () => {
           className='str-chat__search-bar__input'
           data-testid='search-input'
           disabled={disabled}
-          onBlur={() => {
-            if (exitSearchOnInputBlur) searchController.exit();
+          onBlur={({ currentTarget, relatedTarget }) => {
+            if (
+              exitSearchOnInputBlur &&
+              // input is empty
+              !currentTarget.value &&
+              // clicking on filter buttons or clear button shouldn't trigger exit search on blur
+              !filterButtonsContainerRef.current?.contains(relatedTarget) &&
+              // clicking clear button shouldn't trigger exit search on blur
+              (!clearButtonRef.current || relatedTarget !== clearButtonRef.current)
+            ) {
+              searchController.exit();
+            }
           }}
           onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
             if (event.target.value) {
@@ -80,14 +96,14 @@ export const SearchBar = () => {
               searchController.clear();
               input?.focus();
             }}
+            ref={clearButtonRef}
             size='xs'
             variant='secondary'
           >
             <IconCircleX />
           </Button>
         )}
       </div>
-      {/* TODO: return button once designs are in */}
       {isActive && (
         <Button
           appearance='ghost'

src/experimental/Search/SearchContext.tsx

@@ -1,19 +1,17 @@
 import React, { createContext, useContext } from 'react';
 import type { PropsWithChildren } from 'react';
 import type { SearchController } from 'stream-chat';
+import type { SearchProps } from './Search';
 
 export type SearchContextValue = {
-  /** The type of channel to create on user result select, defaults to `messaging` */
-  directMessagingChannelType: string;
   /** Instance of the search controller that handles the data management */
   searchController: SearchController;
-  /** Sets the input element into disabled state */
-  disabled?: boolean;
-  /** Clear search state / results on every click outside the search input, defaults to true */
-  exitSearchOnInputBlur?: boolean;
-  /** Custom placeholder text to be displayed in the search input */
-  placeholder?: string;
-};
+  /** Reference to the container element of the search component */
+  containerRef: React.RefObject<HTMLDivElement | null>;
+  /** Reference to the container element of the filter buttons */
+  filterButtonsContainerRef: React.RefObject<HTMLDivElement | null>;
+} & Pick<SearchProps, 'disabled' | 'placeholder'> &
+  Required<Pick<SearchProps, 'exitSearchOnInputBlur' | 'directMessagingChannelType'>>;
 
 export const SearchContext = createContext<SearchContextValue | undefined>(undefined);
 

src/experimental/Search/SearchResults/SearchResultsHeader.tsx

@@ -63,7 +63,7 @@ const SearchSourceFilterButton = ({ source }: SearchSourceFilterButtonProps) =>
 };
 
 export const SearchResultsHeader = () => {
-  const { searchController } = useSearchContext();
+  const { filterButtonsContainerRef, searchController } = useSearchContext();
 
   // render nothing if there's only one source (can't change filters)
   if (searchController.sources.length < 2) return null;
@@ -73,12 +73,10 @@ export const SearchResultsHeader = () => {
       <div
         className='str-chat__search-results-header__filter-source-buttons'
         data-testid='filter-source-buttons'
+        ref={filterButtonsContainerRef}
       >
         {searchController.sources.map((source) => (
-          <SearchSourceFilterButton
-            key={`search-source-filter-button-${source.type}`}
-            source={source}
-          />
+          <SearchSourceFilterButton key={source.type} source={source} />
         ))}
       </div>
     </div>