From 457de7596639537b165cbaf660f79bde3203672d Mon Sep 17 00:00:00 2001
From: Anton Arnautov <arnautov.anton@gmail.com>
Date: Mon, 16 Mar 2026 16:31:31 +0100
Subject: [PATCH 1/3] Allow exiting search on blur, fix behavior

---
 examples/vite/src/ChatLayout/Panels.tsx       |  7 +++++-
 src/experimental/Search/Search.tsx            | 12 +++++++---
 .../Search/SearchBar/SearchBar.tsx            | 24 +++++++++++++++----
 src/experimental/Search/SearchContext.tsx     | 16 ++++++-------
 .../SearchResults/SearchResultsHeader.tsx     |  8 +++----
 5 files changed, 44 insertions(+), 23 deletions(-)

diff --git a/examples/vite/src/ChatLayout/Panels.tsx b/examples/vite/src/ChatLayout/Panels.tsx
index 491d62c3a9..ada0ac2b34 100644
--- a/examples/vite/src/ChatLayout/Panels.tsx
+++ b/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}
diff --git a/src/experimental/Search/Search.tsx b/src/experimental/Search/Search.tsx
index 633f964966..d2df6337c3 100644
--- a/src/experimental/Search/Search.tsx
+++ b/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 />
diff --git a/src/experimental/Search/SearchBar/SearchBar.tsx b/src/experimental/Search/SearchBar/SearchBar.tsx
index 6dd140fd20..165f621fff 100644
--- a/src/experimental/Search/SearchBar/SearchBar.tsx
+++ b/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,16 @@ export const SearchBar = () => {
           className='str-chat__search-bar__input'
           data-testid='search-input'
           disabled={disabled}
-          onBlur={() => {
-            if (exitSearchOnInputBlur) searchController.exit();
+          onBlur={({ relatedTarget }) => {
+            if (
+              exitSearchOnInputBlur &&
+              // 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,6 +94,7 @@ export const SearchBar = () => {
               searchController.clear();
               input?.focus();
             }}
+            ref={clearButtonRef}
             size='xs'
             variant='secondary'
           >
@@ -87,7 +102,6 @@ export const SearchBar = () => {
           </Button>
         )}
       </div>
-      {/* TODO: return button once designs are in */}
       {isActive && (
         <Button
           appearance='ghost'
diff --git a/src/experimental/Search/SearchContext.tsx b/src/experimental/Search/SearchContext.tsx
index 9a91a18333..2066e7fd6c 100644
--- a/src/experimental/Search/SearchContext.tsx
+++ b/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);
 
diff --git a/src/experimental/Search/SearchResults/SearchResultsHeader.tsx b/src/experimental/Search/SearchResults/SearchResultsHeader.tsx
index 8c23d0d95d..936b64becb 100644
--- a/src/experimental/Search/SearchResults/SearchResultsHeader.tsx
+++ b/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>

From 06c457079cc9a402566dd129a43490d4b8b71ddf Mon Sep 17 00:00:00 2001
From: Anton Arnautov <arnautov.anton@gmail.com>
Date: Mon, 16 Mar 2026 16:31:55 +0100
Subject: [PATCH 2/3] Minor EventComponent adjustment

---
 src/components/EventComponent/EventComponent.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/EventComponent/EventComponent.tsx b/src/components/EventComponent/EventComponent.tsx
index b303496c57..1ff55fd217 100644
--- a/src/components/EventComponent/EventComponent.tsx
+++ b/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 & {

From 5440a23cdd03be6923b5a848814057f5e18a52e5 Mon Sep 17 00:00:00 2001
From: Anton Arnautov <arnautov.anton@gmail.com>
Date: Mon, 16 Mar 2026 17:01:57 +0100
Subject: [PATCH 3/3] Add search bar value check too

---
 src/experimental/Search/SearchBar/SearchBar.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/experimental/Search/SearchBar/SearchBar.tsx b/src/experimental/Search/SearchBar/SearchBar.tsx
index 165f621fff..3b66b75f9a 100644
--- a/src/experimental/Search/SearchBar/SearchBar.tsx
+++ b/src/experimental/Search/SearchBar/SearchBar.tsx
@@ -59,9 +59,11 @@ export const SearchBar = () => {
           className='str-chat__search-bar__input'
           data-testid='search-input'
           disabled={disabled}
-          onBlur={({ relatedTarget }) => {
+          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