From 0c482d10fc6bde08084d055d7359cd0b4e27c310 Mon Sep 17 00:00:00 2001
From: Bernhard Owen Josephus <bernhard.josephus@gmail.com>
Date: Fri, 19 Jun 2026 15:27:45 +0800
Subject: [PATCH 01/13] add text filter length validation

---
 .../ReportFieldFilterContent.tsx              |  9 ++-
 .../SearchAdvancedFiltersContent.tsx          | 11 +---
 .../TextInputFilterContent.tsx                | 34 +++++++++---
 .../ReportField/ReportFieldText.tsx           |  9 ++-
 .../FilterComponents/ReportField/index.tsx    | 16 ++++--
 .../Search/FilterComponents/index.tsx         | 55 +------------------
 .../FilterDropdowns/ReportFieldPopup.tsx      |  5 +-
 .../FilterDropdowns/TextFilterPopup.tsx       | 53 ++++++++++++++++++
 .../SearchPageHeader/useSearchFiltersBar.tsx  | 16 +++++-
 .../Search/hooks/useTextFilterValidation.tsx  | 27 +++++++++
 src/libs/SearchUIUtils.ts                     |  8 ++-
 src/types/form/SearchAdvancedFiltersForm.ts   | 13 ++++-
 12 files changed, 172 insertions(+), 84 deletions(-)
 create mode 100644 src/components/Search/FilterDropdowns/TextFilterPopup.tsx
 create mode 100644 src/components/Search/hooks/useTextFilterValidation.tsx

diff --git a/src/components/Search/FilterComponents/AdvancedFilters/ReportFieldFilterContent.tsx b/src/components/Search/FilterComponents/AdvancedFilters/ReportFieldFilterContent.tsx
index 65fe5e8c09fd..e2e295f28a75 100644
--- a/src/components/Search/FilterComponents/AdvancedFilters/ReportFieldFilterContent.tsx
+++ b/src/components/Search/FilterComponents/AdvancedFilters/ReportFieldFilterContent.tsx
@@ -1,4 +1,4 @@
-import React, {useRef} from 'react';
+import React, {useRef, useState} from 'react';
 import type {StyleProp, ViewStyle} from 'react-native';
 import Button from '@components/Button';
 import ReportFieldBase from '@components/Search/FilterComponents/ReportField';
@@ -22,6 +22,8 @@ function ReportFieldFilterContent({values, selectedField, largeButton, style, on
     const styles = useThemeStyles();
     const reportFieldRef = useRef<ReportFieldHandle>(null);
 
+    const [error, setError] = useState<string>();
+
     return (
         <>
             <ReportFieldBase
@@ -30,6 +32,7 @@ function ReportFieldFilterContent({values, selectedField, largeButton, style, on
                 hasFeed={!!values?.feed}
                 selectedField={selectedField}
                 onFieldSelected={onFieldSelected}
+                onError={setError}
                 style={style}
             />
             {!!selectedField && (
@@ -40,6 +43,10 @@ function ReportFieldFilterContent({values, selectedField, largeButton, style, on
                     text={translate('common.apply')}
                     pressOnEnter
                     onPress={() => {
+                        if (error) {
+                            return;
+                        }
+
                         const value = reportFieldRef.current?.applySelectedFieldAndGoBack();
                         if (!value) {
                             return;
diff --git a/src/components/Search/FilterComponents/AdvancedFilters/SearchAdvancedFiltersContent.tsx b/src/components/Search/FilterComponents/AdvancedFilters/SearchAdvancedFiltersContent.tsx
index d4365dbb5518..5712485f5e97 100644
--- a/src/components/Search/FilterComponents/AdvancedFilters/SearchAdvancedFiltersContent.tsx
+++ b/src/components/Search/FilterComponents/AdvancedFilters/SearchAdvancedFiltersContent.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import {isAmountFilterKey, isDateFilterKey} from '@libs/SearchUIUtils';
+import {isAmountFilterKey, isDateFilterKey, isTextFilterKey} from '@libs/SearchUIUtils';
 import type {SearchFilter} from '@libs/SearchUIUtils';
 import CONST from '@src/CONST';
 import type {SearchAdvancedFiltersForm} from '@src/types/form';
@@ -39,14 +39,7 @@ function getFilterFormValue<K extends FilterComponentsProps['filterKey']>(filter
 function SearchAdvancedFiltersContent({filterKey, values, policyIDQuery, ready, components, onChange}: SearchAdvancedFiltersContentProps) {
     const {Text: TextFilter, Amount: AmountFilter, Date: DateFilter, ReportField: ReportFieldFilter, Common: CommonFilter} = components;
 
-    if (
-        filterKey === CONST.SEARCH.SYNTAX_FILTER_KEYS.MERCHANT ||
-        filterKey === CONST.SEARCH.SYNTAX_FILTER_KEYS.DESCRIPTION ||
-        filterKey === CONST.SEARCH.SYNTAX_FILTER_KEYS.REPORT_ID ||
-        filterKey === CONST.SEARCH.SYNTAX_FILTER_KEYS.KEYWORD ||
-        filterKey === CONST.SEARCH.SYNTAX_FILTER_KEYS.TITLE ||
-        filterKey === CONST.SEARCH.SYNTAX_FILTER_KEYS.WITHDRAWAL_ID
-    ) {
+    if (isTextFilterKey(filterKey)) {
         return (
             <TextFilter
                 key={filterKey}
diff --git a/src/components/Search/FilterComponents/AdvancedFilters/TextInputFilterContent.tsx b/src/components/Search/FilterComponents/AdvancedFilters/TextInputFilterContent.tsx
index 71082b1d8ad6..74ba4b141f40 100644
--- a/src/components/Search/FilterComponents/AdvancedFilters/TextInputFilterContent.tsx
+++ b/src/components/Search/FilterComponents/AdvancedFilters/TextInputFilterContent.tsx
@@ -2,10 +2,14 @@ import React, {useState} from 'react';
 import {View} from 'react-native';
 import type {StyleProp, ViewStyle} from 'react-native';
 import Button from '@components/Button';
+import useTextFilterValidation from '@components/Search/hooks/useTextFilterValidation';
+import TextInput from '@components/TextInput';
+import type {BaseTextInputRef} from '@components/TextInput/BaseTextInput/types';
+import useAutoFocusInput from '@hooks/useAutoFocusInput';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
-import type CONST from '@src/CONST';
-import FilterComponents from '..';
+import {FILTER_VIEW_MAP} from '@libs/SearchUIUtils';
+import CONST from '@src/CONST';
 
 type TextInputFilterContentProps = {
     filterKey:
@@ -27,15 +31,22 @@ function TextInputFilterContent({filterKey, value: initialValue, autoFocus, larg
     const styles = useThemeStyles();
     const [value, setValue] = useState(initialValue);
 
+    const label = translate(FILTER_VIEW_MAP[filterKey].labelKey);
+    const {inputCallbackRef} = useAutoFocusInput();
+    const error = useTextFilterValidation(filterKey, value);
+
     return (
         <View style={[styles.flex1, styles.justifyContentBetween, style]}>
-            <FilterComponents
+            <TextInput
+                ref={autoFocus ? (inputCallbackRef as (ref: BaseTextInputRef | null) => void) : undefined}
+                placeholder={label}
                 value={value}
-                policyIDs={undefined}
-                filterKey={filterKey}
-                policyIDQuery={undefined}
-                autoFocus={autoFocus}
-                onChange={(v) => setValue(typeof v === 'string' ? v : undefined)}
+                errorText={error}
+                hasError={!!error}
+                onChangeText={setValue}
+                accessibilityLabel={label}
+                role={CONST.ROLE.PRESENTATION}
+                containerStyles={[styles.ph5]}
             />
             <Button
                 style={[styles.ph5, styles.pb5]}
@@ -43,7 +54,12 @@ function TextInputFilterContent({filterKey, value: initialValue, autoFocus, larg
                 large={largeButton}
                 text={translate('common.confirm')}
                 pressOnEnter
-                onPress={() => onChange(value)}
+                onPress={() => {
+                    if (error) {
+                        return;
+                    }
+                    onChange(value);
+                }}
             />
         </View>
     );
diff --git a/src/components/Search/FilterComponents/ReportField/ReportFieldText.tsx b/src/components/Search/FilterComponents/ReportField/ReportFieldText.tsx
index 98ca3365f13c..94de9e34a15e 100644
--- a/src/components/Search/FilterComponents/ReportField/ReportFieldText.tsx
+++ b/src/components/Search/FilterComponents/ReportField/ReportFieldText.tsx
@@ -1,22 +1,29 @@
 import React from 'react';
+import useTextFilterValidation from '@components/Search/hooks/useTextFilterValidation';
+import type {ReportFieldTextKey} from '@components/Search/types';
 import TextInput from '@components/TextInput';
 import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
 import type {PolicyReportField} from '@src/types/onyx';
 
 type ReportFieldTextProps = {
+    filterKey: ReportFieldTextKey;
     field: PolicyReportField;
     value: string | undefined;
     onChange: (newValue: string) => void;
+    onError: (error: string | undefined) => void;
 };
 
-function ReportFieldText({field, value, onChange}: ReportFieldTextProps) {
+function ReportFieldText({filterKey, field, value, onChange, onError}: ReportFieldTextProps) {
     const styles = useThemeStyles();
+    const error = useTextFilterValidation(filterKey, value, onError);
 
     return (
         <TextInput
             placeholder={field.name}
             value={value}
+            errorText={error}
+            hasError={!!error}
             onChangeText={onChange}
             accessibilityLabel={field.name}
             role={CONST.ROLE.PRESENTATION}
diff --git a/src/components/Search/FilterComponents/ReportField/index.tsx b/src/components/Search/FilterComponents/ReportField/index.tsx
index cbdd8206ea6a..28a527dc7faf 100644
--- a/src/components/Search/FilterComponents/ReportField/index.tsx
+++ b/src/components/Search/FilterComponents/ReportField/index.tsx
@@ -37,12 +37,14 @@ type ReportFieldBaseProps = {
     hasFeed: boolean;
     style?: StyleProp<ViewStyle>;
     onFieldSelected: (field: PolicyReportField | null) => void;
+    onError: (error: string | undefined) => void;
 };
 
 type SelectedReportFieldProps = {
     ref: React.Ref<ReportFieldHandle>;
     field: PolicyReportField;
     value: string | undefined;
+    onError: (error: string | undefined) => void;
 };
 
 type SelectedDateReportFieldProps = {
@@ -63,9 +65,10 @@ function getFilterKey(fieldName: string) {
     return `${CONST.SEARCH.REPORT_FIELD.DEFAULT_PREFIX}${suffix}` as const;
 }
 
-function SelectedReportField({ref, field, value: initialValue}: SelectedReportFieldProps) {
+function SelectedReportField({ref, field, value: initialValue, onError}: SelectedReportFieldProps) {
     const [value, setValue] = useState(initialValue);
     const fieldType = field.type as Exclude<ValueOf<typeof CONST.REPORT_FIELD_TYPES>, typeof CONST.REPORT_FIELD_TYPES.FORMULA | typeof CONST.REPORT_FIELD_TYPES.DATE>;
+    const filterKey = getFilterKey(field.name);
 
     const UpdateReportFieldComponent = {
         [CONST.REPORT_FIELD_TYPES.LIST]: ReportFieldList,
@@ -74,12 +77,10 @@ function SelectedReportField({ref, field, value: initialValue}: SelectedReportFi
 
     useImperativeHandle(ref, () => ({
         getValue: () => {
-            const key = getFilterKey(field.name);
-            return {[key]: value};
+            return {[filterKey]: value};
         },
         getEmptyValue: () => {
-            const key = getFilterKey(field.name);
-            return {[key]: ''};
+            return {[filterKey]: ''};
         },
         isDateModifierSelected: () => false,
         applySelectedFieldAndGoBack: () => {},
@@ -87,9 +88,11 @@ function SelectedReportField({ref, field, value: initialValue}: SelectedReportFi
 
     return (
         <UpdateReportFieldComponent
+            filterKey={filterKey}
             field={field}
             value={value}
             onChange={setValue}
+            onError={onError}
         />
     );
 }
@@ -158,7 +161,7 @@ function SelectedDateReportField({ref, field, value: initialValue, selectedDateM
     );
 }
 
-function ReportFieldBase({ref, values: initialValues = {}, selectedField, hasFeed, style, onFieldSelected}: ReportFieldBaseProps) {
+function ReportFieldBase({ref, values: initialValues = {}, selectedField, hasFeed, style, onFieldSelected, onError}: ReportFieldBaseProps) {
     const {translate, localeCompare} = useLocalize();
     const styles = useThemeStyles();
     const policyReportFieldsSelector = (policies: OnyxCollection<Policy>) => createAllPolicyReportFieldsSelector(policies, localeCompare);
@@ -249,6 +252,7 @@ function ReportFieldBase({ref, values: initialValues = {}, selectedField, hasFee
                         ref={selectedFieldRef}
                         field={selectedField}
                         value={getValue(selectedField.name)}
+                        onError={onError}
                     />
                 )}
             </>
diff --git a/src/components/Search/FilterComponents/index.tsx b/src/components/Search/FilterComponents/index.tsx
index c9cf77254842..bc0b488c6cc3 100644
--- a/src/components/Search/FilterComponents/index.tsx
+++ b/src/components/Search/FilterComponents/index.tsx
@@ -1,11 +1,7 @@
 import React from 'react';
 import type {SearchAmountFilterKeys, SearchDateFilterKeys, SearchFilterCommonProps} from '@components/Search/types';
-import TextInput from '@components/TextInput';
-import type {BaseTextInputRef} from '@components/TextInput/BaseTextInput/types';
-import useAutoFocusInput from '@hooks/useAutoFocusInput';
 import useLocalize from '@hooks/useLocalize';
-import useThemeStyles from '@hooks/useThemeStyles';
-import {FILTER_VIEW_MAP, getMultiSelectFilterOptions, getSingleSelectFilterOptions} from '@libs/SearchUIUtils';
+import {getMultiSelectFilterOptions, getSingleSelectFilterOptions} from '@libs/SearchUIUtils';
 import type {SearchFilter} from '@libs/SearchUIUtils';
 import CONST from '@src/CONST';
 import type {SearchAdvancedFiltersForm} from '@src/types/form/SearchAdvancedFiltersForm';
@@ -32,19 +28,6 @@ type FilterComponentsProps = SearchFilterCommonProps<SearchAdvancedFiltersForm[F
     policyIDQuery: string[] | undefined;
 };
 
-type TextInputFilterComponentsProps = {
-    filterKey:
-        | typeof CONST.SEARCH.SYNTAX_FILTER_KEYS.MERCHANT
-        | typeof CONST.SEARCH.SYNTAX_FILTER_KEYS.DESCRIPTION
-        | typeof CONST.SEARCH.SYNTAX_FILTER_KEYS.REPORT_ID
-        | typeof CONST.SEARCH.SYNTAX_FILTER_KEYS.KEYWORD
-        | typeof CONST.SEARCH.SYNTAX_FILTER_KEYS.TITLE
-        | typeof CONST.SEARCH.SYNTAX_FILTER_KEYS.WITHDRAWAL_ID;
-    value: string | undefined;
-    autoFocus?: boolean;
-    onChange: (value: string) => void;
-};
-
 type SingleSelectFilterKeys = typeof CONST.SEARCH.SYNTAX_FILTER_KEYS.BILLABLE | typeof CONST.SEARCH.SYNTAX_FILTER_KEYS.REIMBURSABLE | typeof CONST.SEARCH.SYNTAX_FILTER_KEYS.WITHDRAWAL_TYPE;
 type SingleSelectFilterComponentsProps = SearchFilterCommonProps<SearchAdvancedFiltersForm[SingleSelectFilterKeys] | undefined> & {
     filterKey: SingleSelectFilterKeys;
@@ -61,26 +44,6 @@ type MultiSelectFilterComponentsProps = SearchFilterCommonProps<SearchAdvancedFi
     type: SearchDataTypes | undefined;
 };
 
-function TextInputFilterComponents({filterKey, value, autoFocus, onChange}: TextInputFilterComponentsProps) {
-    const {translate} = useLocalize();
-    const styles = useThemeStyles();
-
-    const label = translate(FILTER_VIEW_MAP[filterKey].labelKey);
-    const {inputCallbackRef} = useAutoFocusInput();
-
-    return (
-        <TextInput
-            ref={autoFocus ? (inputCallbackRef as (ref: BaseTextInputRef | null) => void) : undefined}
-            placeholder={label}
-            value={value}
-            onChangeText={onChange}
-            accessibilityLabel={label}
-            role={CONST.ROLE.PRESENTATION}
-            containerStyles={[styles.ph5]}
-        />
-    );
-}
-
 function SingleSelectFilterComponents({filterKey, value, selectionListTextInputStyle, selectionListStyle, footer, onChange}: SingleSelectFilterComponentsProps) {
     const {translate} = useLocalize();
     const items = getSingleSelectFilterOptions(filterKey, translate);
@@ -162,22 +125,6 @@ function FilterComponents({filterKey, value, type, policyIDs, policyIDQuery, sel
                 />
             );
         }
-        case CONST.SEARCH.SYNTAX_FILTER_KEYS.MERCHANT:
-        case CONST.SEARCH.SYNTAX_FILTER_KEYS.DESCRIPTION:
-        case CONST.SEARCH.SYNTAX_FILTER_KEYS.REPORT_ID:
-        case CONST.SEARCH.SYNTAX_FILTER_KEYS.KEYWORD:
-        case CONST.SEARCH.SYNTAX_FILTER_KEYS.TITLE:
-        case CONST.SEARCH.SYNTAX_FILTER_KEYS.WITHDRAWAL_ID: {
-            return (
-                <TextInputFilterComponents
-                    key={filterKey}
-                    filterKey={filterKey}
-                    value={typeof value === 'string' ? value : undefined}
-                    autoFocus={autoFocus}
-                    onChange={onChange}
-                />
-            );
-        }
         case CONST.SEARCH.SYNTAX_FILTER_KEYS.CURRENCY:
         case CONST.SEARCH.SYNTAX_FILTER_KEYS.PURCHASE_CURRENCY: {
             return (
diff --git a/src/components/Search/FilterDropdowns/ReportFieldPopup.tsx b/src/components/Search/FilterDropdowns/ReportFieldPopup.tsx
index 23785a620405..9e25637383c8 100644
--- a/src/components/Search/FilterDropdowns/ReportFieldPopup.tsx
+++ b/src/components/Search/FilterDropdowns/ReportFieldPopup.tsx
@@ -24,8 +24,10 @@ function ReportFieldPopup({values, closeOverlay, updateFilterForm}: ReportFieldP
     const [selectedField, setSelectedField] = useState<PolicyReportField | null>(null);
     const reportFieldRef = useRef<ReportFieldHandle>(null);
 
+    const [error, setError] = useState<string>();
+
     const applyChanges = () => {
-        if (!reportFieldRef.current) {
+        if (!reportFieldRef.current || error) {
             return;
         }
 
@@ -51,6 +53,7 @@ function ReportFieldPopup({values, closeOverlay, updateFilterForm}: ReportFieldP
                 hasFeed={!!values.feed}
                 selectedField={selectedField}
                 onFieldSelected={setSelectedField}
+                onError={setError}
             />
         </BasePopup>
     );
diff --git a/src/components/Search/FilterDropdowns/TextFilterPopup.tsx b/src/components/Search/FilterDropdowns/TextFilterPopup.tsx
new file mode 100644
index 000000000000..ba8e3c9e7e48
--- /dev/null
+++ b/src/components/Search/FilterDropdowns/TextFilterPopup.tsx
@@ -0,0 +1,53 @@
+import React, {useState} from 'react';
+import TextInput from '@components/TextInput';
+import useThemeStyles from '@hooks/useThemeStyles';
+import CONST from '@src/CONST';
+import type {SearchAdvancedFiltersForm} from '@src/types/form/SearchAdvancedFiltersForm';
+import useTextFilterValidation from '../hooks/useTextFilterValidation';
+import {SearchTextFilterKeys} from '../types';
+import BasePopup from './BasePopup';
+import type {PopoverComponentProps} from './FilterPopupButton';
+
+type TextFilterPopupProps = {
+    filterKey: SearchTextFilterKeys;
+    value: string | undefined;
+    label: string;
+    closeOverlay: PopoverComponentProps['closeOverlay'];
+    updateFilterForm: (value: Partial<SearchAdvancedFiltersForm>) => void;
+};
+
+function TextFilterPopup({filterKey, value: initialValue, label, updateFilterForm, closeOverlay}: TextFilterPopupProps) {
+    const styles = useThemeStyles();
+    const [value, setValue] = useState(initialValue);
+
+    const error = useTextFilterValidation(filterKey, value);
+
+    const applyChanges = () => {
+        if (error) {
+            return;
+        }
+        updateFilterForm({[filterKey]: value} as Partial<SearchAdvancedFiltersForm>);
+        closeOverlay();
+    };
+
+    return (
+        <BasePopup
+            label={label}
+            onApply={applyChanges}
+            applySentryLabel={`Search-FilterPopupApply-${filterKey}`}
+        >
+            <TextInput
+                placeholder={label}
+                value={value}
+                errorText={error}
+                hasError={!!error}
+                onChangeText={setValue}
+                accessibilityLabel={label}
+                role={CONST.ROLE.PRESENTATION}
+                containerStyles={[styles.ph5]}
+            />
+        </BasePopup>
+    );
+}
+
+export default TextFilterPopup;
diff --git a/src/components/Search/SearchPageHeader/useSearchFiltersBar.tsx b/src/components/Search/SearchPageHeader/useSearchFiltersBar.tsx
index e0a67471c22e..f4c721b532b9 100644
--- a/src/components/Search/SearchPageHeader/useSearchFiltersBar.tsx
+++ b/src/components/Search/SearchPageHeader/useSearchFiltersBar.tsx
@@ -15,7 +15,7 @@ import useOnyx from '@hooks/useOnyx';
 import {close} from '@libs/actions/Modal';
 import {setSearchContext} from '@libs/actions/Search';
 import {getAdvancedFiltersToReset} from '@libs/SearchQueryUtils';
-import {FILTER_VIEW_MAP, isAmountFilterKey, isDateFilterKey, mapFiltersFormToLabelValueList, SKIPPED_SEARCH_FILTERS} from '@libs/SearchUIUtils';
+import {FILTER_VIEW_MAP, isAmountFilterKey, isDateFilterKey, isTextFilterKey, mapFiltersFormToLabelValueList, SKIPPED_SEARCH_FILTERS} from '@libs/SearchUIUtils';
 import type {SearchFilter} from '@libs/SearchUIUtils';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
@@ -23,6 +23,7 @@ import type {SearchAdvancedFiltersForm} from '@src/types/form';
 import type {SearchAdvancedFiltersKey} from '@src/types/form/SearchAdvancedFiltersForm';
 import {getEmptyObject} from '@src/types/utils/EmptyObject';
 import type WithSentryLabel from '@src/types/utils/SentryLabel';
+import TextFilterPopup from '../FilterDropdowns/TextFilterPopup';
 import DatePickerFilterPopup from './DatePickerFilterPopup';
 
 type FilterItem = WithSentryLabel & {
@@ -105,6 +106,19 @@ function FilterPopup({filterKey, searchAdvancedFiltersForm, queryJSON, closeOver
         );
     }
 
+    if (isTextFilterKey(filterKey)) {
+        return (
+            <TextFilterPopup
+                key={filterKey}
+                filterKey={filterKey}
+                value={searchAdvancedFiltersForm[filterKey]}
+                label={label}
+                closeOverlay={closeOverlay}
+                updateFilterForm={closeModalAndUpdateFilterForm}
+            />
+        );
+    }
+
     return (
         <CommonPopup
             filterKey={filterKey}
diff --git a/src/components/Search/hooks/useTextFilterValidation.tsx b/src/components/Search/hooks/useTextFilterValidation.tsx
new file mode 100644
index 000000000000..01f769ad7308
--- /dev/null
+++ b/src/components/Search/hooks/useTextFilterValidation.tsx
@@ -0,0 +1,27 @@
+import {useEffect} from 'react';
+import useLocalize from '@hooks/useLocalize';
+import {isValidInputLength} from '@libs/ValidationUtils';
+import CONST from '@src/CONST';
+import type {SearchTextFilterKeys} from '../types';
+
+const FILTER_MAX_LENGTH: Partial<Record<SearchTextFilterKeys, number>> = {
+    [CONST.SEARCH.SYNTAX_FILTER_KEYS.DESCRIPTION]: CONST.DESCRIPTION_LIMIT,
+    [CONST.SEARCH.SYNTAX_FILTER_KEYS.MERCHANT]: CONST.MERCHANT_NAME_MAX_BYTES,
+    [CONST.SEARCH.SYNTAX_FILTER_KEYS.REPORT_ID]: CONST.DESCRIPTION_LIMIT,
+    [CONST.SEARCH.SYNTAX_FILTER_KEYS.TITLE]: CONST.TASK_TITLE_CHARACTER_LIMIT,
+};
+
+function useTextFilterValidation(filterKey: SearchTextFilterKeys, value: string | undefined, onError?: (error: string | undefined) => void) {
+    const {translate} = useLocalize();
+    const maxLength = FILTER_MAX_LENGTH[filterKey] ?? CONST.MAX_COMMENT_LENGTH;
+    const {isValid, byteLength} = isValidInputLength(value?.trim() ?? '', maxLength);
+    const error = !isValid ? translate('common.error.characterLimitExceedCounter', byteLength, maxLength) : undefined;
+
+    useEffect(() => {
+        onError?.(error);
+    }, [error]);
+
+    return error;
+}
+
+export default useTextFilterValidation;
diff --git a/src/libs/SearchUIUtils.ts b/src/libs/SearchUIUtils.ts
index 29ef2ccc7e3d..312e91ed4e93 100644
--- a/src/libs/SearchUIUtils.ts
+++ b/src/libs/SearchUIUtils.ts
@@ -51,6 +51,7 @@ import type {
     SearchQueryJSON,
     SearchSortBy,
     SearchStatus,
+    SearchTextFilterKeys,
     SearchView,
     SearchWithdrawalStatus,
     SearchWithdrawalType,
@@ -69,7 +70,7 @@ import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import type {Route} from '@src/ROUTES';
 import type {SearchAdvancedFiltersForm} from '@src/types/form';
-import FILTER_KEYS, {AMOUNT_FILTER_KEYS, DATE_FILTER_KEYS} from '@src/types/form/SearchAdvancedFiltersForm';
+import FILTER_KEYS, {AMOUNT_FILTER_KEYS, DATE_FILTER_KEYS, TEXT_FILTER_KEYS} from '@src/types/form/SearchAdvancedFiltersForm';
 import type {HasFilterValues, SearchAdvancedFiltersKey} from '@src/types/form/SearchAdvancedFiltersForm';
 import type * as OnyxTypes from '@src/types/onyx';
 import type {ConnectionName} from '@src/types/onyx/Policy';
@@ -5353,6 +5354,10 @@ function shouldShowFilter(skipFilters: Set<SearchAdvancedFiltersKey> | undefined
     return !skipFilters?.has(key) && isFilterSupported(key, type) && value && (!Array.isArray(value) || value.length > 0);
 }
 
+function isTextFilterKey(key: string): key is SearchTextFilterKeys {
+    return TEXT_FILTER_KEYS.includes(key as SearchTextFilterKeys);
+}
+
 const isAmountFilterKey = (key: SearchFilter['key']): key is SearchAmountFilterKeys => {
     return AMOUNT_FILTER_KEYS.includes(key as SearchAmountFilterKeys);
 };
@@ -6314,6 +6319,7 @@ export {
     getDateDisplayValue,
     shouldShowFilter,
     mapFiltersFormToLabelValueList,
+    isTextFilterKey,
     isAmountFilterKey,
     isDateFilterKey,
     getSingleSelectFilterOptions,
diff --git a/src/types/form/SearchAdvancedFiltersForm.ts b/src/types/form/SearchAdvancedFiltersForm.ts
index 91887f8d83df..befb2e670d85 100644
--- a/src/types/form/SearchAdvancedFiltersForm.ts
+++ b/src/types/form/SearchAdvancedFiltersForm.ts
@@ -8,6 +8,7 @@ import type {
     SearchCustomColumnIds,
     SearchDateFilterKeys,
     SearchGroupBy,
+    SearchTextFilterKeys,
     SearchView,
     SearchWithdrawalStatus,
     SearchWithdrawalType,
@@ -16,6 +17,16 @@ import CONST from '@src/CONST';
 import type {SearchDataTypes} from '@src/types/onyx/SearchResults';
 import type Form from './Form';
 
+const TEXT_FILTER_KEYS: SearchTextFilterKeys[] = [
+    CONST.SEARCH.SYNTAX_FILTER_KEYS.MERCHANT,
+    CONST.SEARCH.SYNTAX_FILTER_KEYS.DESCRIPTION,
+    CONST.SEARCH.SYNTAX_FILTER_KEYS.REPORT_ID,
+    CONST.SEARCH.SYNTAX_FILTER_KEYS.KEYWORD,
+    CONST.SEARCH.SYNTAX_FILTER_KEYS.TITLE,
+    CONST.SEARCH.SYNTAX_FILTER_KEYS.WITHDRAWAL_ID,
+    CONST.SEARCH.SYNTAX_ROOT_KEYS.LIMIT,
+];
+
 const DATE_FILTER_KEYS: SearchDateFilterKeys[] = [
     CONST.SEARCH.SYNTAX_FILTER_KEYS.DATE,
     CONST.SEARCH.SYNTAX_FILTER_KEYS.SUBMITTED,
@@ -760,4 +771,4 @@ type SearchAdvancedFiltersForm = Form<
 
 export type {SearchAdvancedFiltersForm, SearchAdvancedFiltersKey, HasFilterValue, HasFilterValues, IsFilterValue, IsFilterValues, ExpenseTypeValue, ExpenseTypeValues};
 export default FILTER_KEYS;
-export {DATE_FILTER_KEYS, ALLOWED_TYPE_FILTERS, AMOUNT_FILTER_KEYS};
+export {TEXT_FILTER_KEYS, DATE_FILTER_KEYS, ALLOWED_TYPE_FILTERS, AMOUNT_FILTER_KEYS};

From 3cffd1411ca99f6860f449d4737c61f94faa78b3 Mon Sep 17 00:00:00 2001
From: Bernhard Owen Josephus <bernhard.josephus@gmail.com>
Date: Fri, 19 Jun 2026 15:35:23 +0800
Subject: [PATCH 02/13] fix wrong length

---
 src/components/Search/hooks/useTextFilterValidation.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/Search/hooks/useTextFilterValidation.tsx b/src/components/Search/hooks/useTextFilterValidation.tsx
index 01f769ad7308..05006e5a0316 100644
--- a/src/components/Search/hooks/useTextFilterValidation.tsx
+++ b/src/components/Search/hooks/useTextFilterValidation.tsx
@@ -7,7 +7,6 @@ import type {SearchTextFilterKeys} from '../types';
 const FILTER_MAX_LENGTH: Partial<Record<SearchTextFilterKeys, number>> = {
     [CONST.SEARCH.SYNTAX_FILTER_KEYS.DESCRIPTION]: CONST.DESCRIPTION_LIMIT,
     [CONST.SEARCH.SYNTAX_FILTER_KEYS.MERCHANT]: CONST.MERCHANT_NAME_MAX_BYTES,
-    [CONST.SEARCH.SYNTAX_FILTER_KEYS.REPORT_ID]: CONST.DESCRIPTION_LIMIT,
     [CONST.SEARCH.SYNTAX_FILTER_KEYS.TITLE]: CONST.TASK_TITLE_CHARACTER_LIMIT,
 };
 

From 80f9914b8cf7a8e7c38241f3842830d8af8d8bdd Mon Sep 17 00:00:00 2001
From: Bernhard Owen Josephus <bernhard.josephus@gmail.com>
Date: Fri, 19 Jun 2026 20:01:24 +0800
Subject: [PATCH 03/13] lint

---
 .../FilterDropdowns/TextFilterPopup.tsx       |   4 +-
 .../SearchPageHeader/useSearchFiltersBar.tsx  |   2 +-
 .../Search/hooks/useTextFilterValidation.tsx  |   4 +-
 src/libs/SearchUIUtils.ts                     |   2 +-
 src/types/form/SearchAdvancedFiltersForm.ts   |   4 +-
 tests/unit/Search/SearchUIUtilsTest.ts        |  29 +++++
 .../hooks/useTextFilterValidation.test.tsx    | 110 ++++++++++++++++++
 7 files changed, 147 insertions(+), 8 deletions(-)
 create mode 100644 tests/unit/hooks/useTextFilterValidation.test.tsx

diff --git a/src/components/Search/FilterDropdowns/TextFilterPopup.tsx b/src/components/Search/FilterDropdowns/TextFilterPopup.tsx
index ba8e3c9e7e48..2865564be984 100644
--- a/src/components/Search/FilterDropdowns/TextFilterPopup.tsx
+++ b/src/components/Search/FilterDropdowns/TextFilterPopup.tsx
@@ -3,8 +3,8 @@ import TextInput from '@components/TextInput';
 import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
 import type {SearchAdvancedFiltersForm} from '@src/types/form/SearchAdvancedFiltersForm';
-import useTextFilterValidation from '../hooks/useTextFilterValidation';
-import {SearchTextFilterKeys} from '../types';
+import useTextFilterValidation from '@components/Search/hooks/useTextFilterValidation';
+import type {SearchTextFilterKeys} from '@components/Search/types';
 import BasePopup from './BasePopup';
 import type {PopoverComponentProps} from './FilterPopupButton';
 
diff --git a/src/components/Search/SearchPageHeader/useSearchFiltersBar.tsx b/src/components/Search/SearchPageHeader/useSearchFiltersBar.tsx
index f4c721b532b9..39b5dac88243 100644
--- a/src/components/Search/SearchPageHeader/useSearchFiltersBar.tsx
+++ b/src/components/Search/SearchPageHeader/useSearchFiltersBar.tsx
@@ -23,7 +23,7 @@ import type {SearchAdvancedFiltersForm} from '@src/types/form';
 import type {SearchAdvancedFiltersKey} from '@src/types/form/SearchAdvancedFiltersForm';
 import {getEmptyObject} from '@src/types/utils/EmptyObject';
 import type WithSentryLabel from '@src/types/utils/SentryLabel';
-import TextFilterPopup from '../FilterDropdowns/TextFilterPopup';
+import TextFilterPopup from '@components/Search/FilterDropdowns/TextFilterPopup';
 import DatePickerFilterPopup from './DatePickerFilterPopup';
 
 type FilterItem = WithSentryLabel & {
diff --git a/src/components/Search/hooks/useTextFilterValidation.tsx b/src/components/Search/hooks/useTextFilterValidation.tsx
index 05006e5a0316..169755dd5f09 100644
--- a/src/components/Search/hooks/useTextFilterValidation.tsx
+++ b/src/components/Search/hooks/useTextFilterValidation.tsx
@@ -2,7 +2,7 @@ import {useEffect} from 'react';
 import useLocalize from '@hooks/useLocalize';
 import {isValidInputLength} from '@libs/ValidationUtils';
 import CONST from '@src/CONST';
-import type {SearchTextFilterKeys} from '../types';
+import type {SearchTextFilterKeys} from '@components/Search/types';
 
 const FILTER_MAX_LENGTH: Partial<Record<SearchTextFilterKeys, number>> = {
     [CONST.SEARCH.SYNTAX_FILTER_KEYS.DESCRIPTION]: CONST.DESCRIPTION_LIMIT,
@@ -18,7 +18,7 @@ function useTextFilterValidation(filterKey: SearchTextFilterKeys, value: string
 
     useEffect(() => {
         onError?.(error);
-    }, [error]);
+    }, [error, onError]);
 
     return error;
 }
diff --git a/src/libs/SearchUIUtils.ts b/src/libs/SearchUIUtils.ts
index 312e91ed4e93..70633c741a04 100644
--- a/src/libs/SearchUIUtils.ts
+++ b/src/libs/SearchUIUtils.ts
@@ -5355,7 +5355,7 @@ function shouldShowFilter(skipFilters: Set<SearchAdvancedFiltersKey> | undefined
 }
 
 function isTextFilterKey(key: string): key is SearchTextFilterKeys {
-    return TEXT_FILTER_KEYS.includes(key as SearchTextFilterKeys);
+    return (TEXT_FILTER_KEYS as Set<string>).has(key);
 }
 
 const isAmountFilterKey = (key: SearchFilter['key']): key is SearchAmountFilterKeys => {
diff --git a/src/types/form/SearchAdvancedFiltersForm.ts b/src/types/form/SearchAdvancedFiltersForm.ts
index befb2e670d85..2dc97c654487 100644
--- a/src/types/form/SearchAdvancedFiltersForm.ts
+++ b/src/types/form/SearchAdvancedFiltersForm.ts
@@ -17,7 +17,7 @@ import CONST from '@src/CONST';
 import type {SearchDataTypes} from '@src/types/onyx/SearchResults';
 import type Form from './Form';
 
-const TEXT_FILTER_KEYS: SearchTextFilterKeys[] = [
+const TEXT_FILTER_KEYS = new Set<SearchTextFilterKeys>([
     CONST.SEARCH.SYNTAX_FILTER_KEYS.MERCHANT,
     CONST.SEARCH.SYNTAX_FILTER_KEYS.DESCRIPTION,
     CONST.SEARCH.SYNTAX_FILTER_KEYS.REPORT_ID,
@@ -25,7 +25,7 @@ const TEXT_FILTER_KEYS: SearchTextFilterKeys[] = [
     CONST.SEARCH.SYNTAX_FILTER_KEYS.TITLE,
     CONST.SEARCH.SYNTAX_FILTER_KEYS.WITHDRAWAL_ID,
     CONST.SEARCH.SYNTAX_ROOT_KEYS.LIMIT,
-];
+]);
 
 const DATE_FILTER_KEYS: SearchDateFilterKeys[] = [
     CONST.SEARCH.SYNTAX_FILTER_KEYS.DATE,
diff --git a/tests/unit/Search/SearchUIUtilsTest.ts b/tests/unit/Search/SearchUIUtilsTest.ts
index f6b37c1597a8..3adc60934aba 100644
--- a/tests/unit/Search/SearchUIUtilsTest.ts
+++ b/tests/unit/Search/SearchUIUtilsTest.ts
@@ -10178,6 +10178,35 @@ describe('SearchUIUtils', () => {
             expect(SearchUIUtils.isPolicyEligibleForSpendOverTime(regularPolicy, userEmail)).toBe(false);
         });
     });
+
+    describe('isTextFilterKey', () => {
+        it.each([
+            CONST.SEARCH.SYNTAX_FILTER_KEYS.MERCHANT,
+            CONST.SEARCH.SYNTAX_FILTER_KEYS.DESCRIPTION,
+            CONST.SEARCH.SYNTAX_FILTER_KEYS.REPORT_ID,
+            CONST.SEARCH.SYNTAX_FILTER_KEYS.KEYWORD,
+            CONST.SEARCH.SYNTAX_FILTER_KEYS.TITLE,
+            CONST.SEARCH.SYNTAX_FILTER_KEYS.WITHDRAWAL_ID,
+            CONST.SEARCH.SYNTAX_ROOT_KEYS.LIMIT,
+        ])('returns true for the text filter key "%s"', (key) => {
+            expect(SearchUIUtils.isTextFilterKey(key)).toBe(true);
+        });
+
+        it.each([
+            CONST.SEARCH.SYNTAX_FILTER_KEYS.DATE,
+            CONST.SEARCH.SYNTAX_FILTER_KEYS.AMOUNT,
+            CONST.SEARCH.SYNTAX_FILTER_KEYS.BILLABLE,
+            CONST.SEARCH.SYNTAX_FILTER_KEYS.REIMBURSABLE,
+            CONST.SEARCH.SYNTAX_FILTER_KEYS.CATEGORY,
+        ])('returns false for the non-text filter key "%s"', (key) => {
+            expect(SearchUIUtils.isTextFilterKey(key)).toBe(false);
+        });
+
+        it('returns false for an unknown key', () => {
+            expect(SearchUIUtils.isTextFilterKey('someUnknownKey')).toBe(false);
+            expect(SearchUIUtils.isTextFilterKey('')).toBe(false);
+        });
+    });
 });
 
 describe('getCardDescriptionForSearchTable', () => {
diff --git a/tests/unit/hooks/useTextFilterValidation.test.tsx b/tests/unit/hooks/useTextFilterValidation.test.tsx
new file mode 100644
index 000000000000..6c886cbc06bb
--- /dev/null
+++ b/tests/unit/hooks/useTextFilterValidation.test.tsx
@@ -0,0 +1,110 @@
+import {renderHook} from '@testing-library/react-native';
+import React from 'react';
+import Onyx from 'react-native-onyx';
+import {LocaleContextProvider} from '@components/LocaleContextProvider';
+import useTextFilterValidation from '@components/Search/hooks/useTextFilterValidation';
+import type {SearchTextFilterKeys} from '@components/Search/types';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import {translateLocal} from '../../utils/TestHelper';
+
+function wrapper({children}: {children: React.ReactNode}) {
+    return React.createElement(LocaleContextProvider, null, children);
+}
+
+function renderValidationHook(filterKey: SearchTextFilterKeys, value: string | undefined, onError?: (error: string | undefined) => void) {
+    return renderHook(({key, val}: {key: SearchTextFilterKeys; val: string | undefined}) => useTextFilterValidation(key, val, onError), {
+        wrapper,
+        initialProps: {key: filterKey, val: value},
+    });
+}
+
+const expectedError = (length: number, limit: number) => translateLocal('common.error.characterLimitExceedCounter', length, limit);
+
+describe('useTextFilterValidation', () => {
+    beforeAll(() => {
+        Onyx.init({keys: ONYXKEYS});
+    });
+
+    beforeEach(async () => {
+        await Onyx.clear();
+    });
+
+    it('returns undefined when the value is within the limit', () => {
+        const {result} = renderValidationHook(CONST.SEARCH.SYNTAX_FILTER_KEYS.DESCRIPTION, 'short value');
+        expect(result.current).toBeUndefined();
+    });
+
+    it('returns undefined for an undefined value', () => {
+        const {result} = renderValidationHook(CONST.SEARCH.SYNTAX_FILTER_KEYS.DESCRIPTION, undefined);
+        expect(result.current).toBeUndefined();
+    });
+
+    it('returns an error when the description value exceeds DESCRIPTION_LIMIT', () => {
+        const length = CONST.DESCRIPTION_LIMIT + 1;
+        const value = 'x'.repeat(length);
+        const {result} = renderValidationHook(CONST.SEARCH.SYNTAX_FILTER_KEYS.DESCRIPTION, value);
+        expect(result.current).toBe(expectedError(length, CONST.DESCRIPTION_LIMIT));
+    });
+
+    it('uses MERCHANT_NAME_MAX_BYTES for the merchant filter', () => {
+        const length = CONST.MERCHANT_NAME_MAX_BYTES + 1;
+        const value = 'x'.repeat(length);
+        const {result} = renderValidationHook(CONST.SEARCH.SYNTAX_FILTER_KEYS.MERCHANT, value);
+        expect(result.current).toBe(expectedError(length, CONST.MERCHANT_NAME_MAX_BYTES));
+    });
+
+    it('uses TASK_TITLE_CHARACTER_LIMIT for the title filter', () => {
+        const length = CONST.TASK_TITLE_CHARACTER_LIMIT + 1;
+        const value = 'x'.repeat(length);
+        const {result} = renderValidationHook(CONST.SEARCH.SYNTAX_FILTER_KEYS.TITLE, value);
+        expect(result.current).toBe(expectedError(length, CONST.TASK_TITLE_CHARACTER_LIMIT));
+    });
+
+    it('falls back to MAX_COMMENT_LENGTH for filters without a specific limit', () => {
+        const length = CONST.MAX_COMMENT_LENGTH + 1;
+        const value = 'x'.repeat(length);
+        const {result} = renderValidationHook(CONST.SEARCH.SYNTAX_FILTER_KEYS.KEYWORD, value);
+        expect(result.current).toBe(expectedError(length, CONST.MAX_COMMENT_LENGTH));
+    });
+
+    it('trims the value before measuring its length', () => {
+        // The trimmed value is exactly at the limit, so the surrounding whitespace should be ignored.
+        const value = `  ${'x'.repeat(CONST.DESCRIPTION_LIMIT)}  `;
+        const {result} = renderValidationHook(CONST.SEARCH.SYNTAX_FILTER_KEYS.DESCRIPTION, value);
+        expect(result.current).toBeUndefined();
+    });
+
+    it('measures byte length for multi-byte characters', () => {
+        // Each "😀" is 4 UTF-8 bytes, so DESCRIPTION_LIMIT / 4 + 1 emojis exceed the byte limit.
+        const emojiCount = Math.floor(CONST.DESCRIPTION_LIMIT / 4) + 1;
+        const value = '😀'.repeat(emojiCount);
+        const {result} = renderValidationHook(CONST.SEARCH.SYNTAX_FILTER_KEYS.DESCRIPTION, value);
+        expect(result.current).toBe(expectedError(emojiCount * 4, CONST.DESCRIPTION_LIMIT));
+    });
+
+    it('calls onError with the error message when the value is invalid', () => {
+        const onError = jest.fn();
+        const length = CONST.DESCRIPTION_LIMIT + 1;
+        renderValidationHook(CONST.SEARCH.SYNTAX_FILTER_KEYS.DESCRIPTION, 'x'.repeat(length), onError);
+        expect(onError).toHaveBeenCalledWith(expectedError(length, CONST.DESCRIPTION_LIMIT));
+    });
+
+    it('calls onError with undefined when the value is valid', () => {
+        const onError = jest.fn();
+        renderValidationHook(CONST.SEARCH.SYNTAX_FILTER_KEYS.DESCRIPTION, 'short value', onError);
+        expect(onError).toHaveBeenCalledWith(undefined);
+    });
+
+    it('calls onError again when the error changes from valid to invalid', () => {
+        const onError = jest.fn();
+        const length = CONST.DESCRIPTION_LIMIT + 1;
+        const {rerender} = renderValidationHook(CONST.SEARCH.SYNTAX_FILTER_KEYS.DESCRIPTION, 'short value', onError);
+
+        expect(onError).toHaveBeenLastCalledWith(undefined);
+
+        rerender({key: CONST.SEARCH.SYNTAX_FILTER_KEYS.DESCRIPTION, val: 'x'.repeat(length)});
+
+        expect(onError).toHaveBeenLastCalledWith(expectedError(length, CONST.DESCRIPTION_LIMIT));
+    });
+});

From 9ad9dde2459c4e723e359ddd4becbe09ac3cd14c Mon Sep 17 00:00:00 2001
From: Bernhard Owen Josephus <bernhard.josephus@gmail.com>
Date: Fri, 19 Jun 2026 20:08:19 +0800
Subject: [PATCH 04/13] prettier

---
 src/components/Search/FilterDropdowns/TextFilterPopup.tsx     | 4 ++--
 .../Search/SearchPageHeader/useSearchFiltersBar.tsx           | 2 +-
 src/components/Search/hooks/useTextFilterValidation.tsx       | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/Search/FilterDropdowns/TextFilterPopup.tsx b/src/components/Search/FilterDropdowns/TextFilterPopup.tsx
index 2865564be984..45e14d12fc93 100644
--- a/src/components/Search/FilterDropdowns/TextFilterPopup.tsx
+++ b/src/components/Search/FilterDropdowns/TextFilterPopup.tsx
@@ -1,10 +1,10 @@
 import React, {useState} from 'react';
+import useTextFilterValidation from '@components/Search/hooks/useTextFilterValidation';
+import type {SearchTextFilterKeys} from '@components/Search/types';
 import TextInput from '@components/TextInput';
 import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
 import type {SearchAdvancedFiltersForm} from '@src/types/form/SearchAdvancedFiltersForm';
-import useTextFilterValidation from '@components/Search/hooks/useTextFilterValidation';
-import type {SearchTextFilterKeys} from '@components/Search/types';
 import BasePopup from './BasePopup';
 import type {PopoverComponentProps} from './FilterPopupButton';
 
diff --git a/src/components/Search/SearchPageHeader/useSearchFiltersBar.tsx b/src/components/Search/SearchPageHeader/useSearchFiltersBar.tsx
index 39b5dac88243..921485dd98a3 100644
--- a/src/components/Search/SearchPageHeader/useSearchFiltersBar.tsx
+++ b/src/components/Search/SearchPageHeader/useSearchFiltersBar.tsx
@@ -5,6 +5,7 @@ import AmountPopup from '@components/Search/FilterDropdowns/AmountPopup';
 import CommonPopup from '@components/Search/FilterDropdowns/CommonPopup';
 import type {PopoverComponentProps} from '@components/Search/FilterDropdowns/FilterPopupButton';
 import ReportFieldPopup from '@components/Search/FilterDropdowns/ReportFieldPopup';
+import TextFilterPopup from '@components/Search/FilterDropdowns/TextFilterPopup';
 import useUpdateFilterQuery from '@components/Search/hooks/useUpdateFilterQuery';
 import {useSearchResultsContext} from '@components/Search/SearchContext';
 import type {ReportFieldKey, SearchFilterKey, SearchQueryJSON} from '@components/Search/types';
@@ -23,7 +24,6 @@ import type {SearchAdvancedFiltersForm} from '@src/types/form';
 import type {SearchAdvancedFiltersKey} from '@src/types/form/SearchAdvancedFiltersForm';
 import {getEmptyObject} from '@src/types/utils/EmptyObject';
 import type WithSentryLabel from '@src/types/utils/SentryLabel';
-import TextFilterPopup from '@components/Search/FilterDropdowns/TextFilterPopup';
 import DatePickerFilterPopup from './DatePickerFilterPopup';
 
 type FilterItem = WithSentryLabel & {
diff --git a/src/components/Search/hooks/useTextFilterValidation.tsx b/src/components/Search/hooks/useTextFilterValidation.tsx
index 169755dd5f09..df4bd7c5e33b 100644
--- a/src/components/Search/hooks/useTextFilterValidation.tsx
+++ b/src/components/Search/hooks/useTextFilterValidation.tsx
@@ -1,8 +1,8 @@
 import {useEffect} from 'react';
+import type {SearchTextFilterKeys} from '@components/Search/types';
 import useLocalize from '@hooks/useLocalize';
 import {isValidInputLength} from '@libs/ValidationUtils';
 import CONST from '@src/CONST';
-import type {SearchTextFilterKeys} from '@components/Search/types';
 
 const FILTER_MAX_LENGTH: Partial<Record<SearchTextFilterKeys, number>> = {
     [CONST.SEARCH.SYNTAX_FILTER_KEYS.DESCRIPTION]: CONST.DESCRIPTION_LIMIT,

From 3d373666dccfd745b4514a78fd814ef605e7a121 Mon Sep 17 00:00:00 2001
From: Bernhard Owen Josephus <bernhard.josephus@gmail.com>
Date: Fri, 19 Jun 2026 23:34:27 +0800
Subject: [PATCH 05/13] fix type

---
 .../AdvancedFilters/TextInputFilterContent.tsx           | 2 +-
 src/hooks/useAutoFocusInput.ts                           | 9 +++++----
 src/libs/InputUtils/types.ts                             | 5 +++--
 src/libs/focusAfterModalClose.ts                         | 3 ++-
 src/libs/focusComposerWithDelay/types.ts                 | 3 ++-
 5 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/src/components/Search/FilterComponents/AdvancedFilters/TextInputFilterContent.tsx b/src/components/Search/FilterComponents/AdvancedFilters/TextInputFilterContent.tsx
index 74ba4b141f40..a6ff60fe3b75 100644
--- a/src/components/Search/FilterComponents/AdvancedFilters/TextInputFilterContent.tsx
+++ b/src/components/Search/FilterComponents/AdvancedFilters/TextInputFilterContent.tsx
@@ -38,7 +38,7 @@ function TextInputFilterContent({filterKey, value: initialValue, autoFocus, larg
     return (
         <View style={[styles.flex1, styles.justifyContentBetween, style]}>
             <TextInput
-                ref={autoFocus ? (inputCallbackRef as (ref: BaseTextInputRef | null) => void) : undefined}
+                ref={autoFocus ? inputCallbackRef : undefined}
                 placeholder={label}
                 value={value}
                 errorText={error}
diff --git a/src/hooks/useAutoFocusInput.ts b/src/hooks/useAutoFocusInput.ts
index d58c711a1a62..a870f12cafae 100644
--- a/src/hooks/useAutoFocusInput.ts
+++ b/src/hooks/useAutoFocusInput.ts
@@ -2,6 +2,7 @@ import {useFocusEffect, useNavigation} from '@react-navigation/native';
 import {useCallback, useEffect, useRef, useState} from 'react';
 import type {RefObject} from 'react';
 import type {TextInput} from 'react-native';
+import type {BaseTextInputRef} from '@components/TextInput/BaseTextInput/types';
 import Accessibility from '@libs/Accessibility';
 import ComposerFocusManager from '@libs/ComposerFocusManager';
 import {moveSelectionToEnd, scrollToBottom} from '@libs/InputUtils';
@@ -19,8 +20,8 @@ import useOnyx from './useOnyx';
 import useSidePanelState from './useSidePanelState';
 
 type UseAutoFocusInput = {
-    inputCallbackRef: (ref: TextInput | null) => void;
-    inputRef: RefObject<TextInput | null>;
+    inputCallbackRef: (ref: TextInput | BaseTextInputRef | null) => void;
+    inputRef: RefObject<TextInput | BaseTextInputRef | null>;
     cancelAutoFocus: () => void;
 };
 
@@ -35,7 +36,7 @@ export default function useAutoFocusInput(isMultiline = false): UseAutoFocusInpu
     const {splashScreenState} = useSplashScreenState();
     const navigation = useNavigation<PlatformStackNavigationProp<RootNavigatorParamList>>();
 
-    const inputRef = useRef<TextInput | null>(null);
+    const inputRef = useRef<TextInput | BaseTextInputRef | null>(null);
     const transitionEndTimeoutRef = useRef<NodeJS.Timeout | null>(null);
     const isAutoFocusCancelledRef = useRef(false);
 
@@ -146,7 +147,7 @@ export default function useAutoFocusInput(isMultiline = false): UseAutoFocusInpu
         }
     }
 
-    const inputCallbackRef = (ref: TextInput | null) => {
+    const inputCallbackRef = (ref: TextInput | BaseTextInputRef | null) => {
         inputRef.current = ref;
         if (isInputInitialized) {
             return;
diff --git a/src/libs/InputUtils/types.ts b/src/libs/InputUtils/types.ts
index c0be24244475..e9d300863887 100644
--- a/src/libs/InputUtils/types.ts
+++ b/src/libs/InputUtils/types.ts
@@ -1,6 +1,7 @@
 import type {TextInput} from 'react-native';
+import type {BaseTextInputRef} from '@components/TextInput/BaseTextInput/types';
 
-type ScrollInput = (input: HTMLInputElement | TextInput) => void;
-type MoveSelectionToEnd = (input: HTMLInputElement | TextInput) => void;
+type ScrollInput = (input: TextInput | BaseTextInputRef) => void;
+type MoveSelectionToEnd = (input: TextInput | BaseTextInputRef) => void;
 
 export type {ScrollInput, MoveSelectionToEnd};
diff --git a/src/libs/focusAfterModalClose.ts b/src/libs/focusAfterModalClose.ts
index cad25cefc2ac..914f58ebf764 100644
--- a/src/libs/focusAfterModalClose.ts
+++ b/src/libs/focusAfterModalClose.ts
@@ -1,8 +1,9 @@
 import type {TextInput} from 'react-native';
+import type {BaseTextInputRef} from '@components/TextInput/BaseTextInput/types';
 import ComposerFocusManager from './ComposerFocusManager';
 import isWindowReadyToFocus from './isWindowReadyToFocus';
 
-function focusAfterModalClose(textInput: TextInput | null) {
+function focusAfterModalClose(textInput: TextInput | BaseTextInputRef | null) {
     if (!textInput) {
         return;
     }
diff --git a/src/libs/focusComposerWithDelay/types.ts b/src/libs/focusComposerWithDelay/types.ts
index 1447161e88f2..cd8ee679e0d0 100644
--- a/src/libs/focusComposerWithDelay/types.ts
+++ b/src/libs/focusComposerWithDelay/types.ts
@@ -1,4 +1,5 @@
 import type {TextInput} from 'react-native';
+import type {BaseTextInputRef} from '@components/TextInput/BaseTextInput/types';
 
 type Selection = {
     start: number;
@@ -9,6 +10,6 @@ type Selection = {
 
 type FocusComposerWithDelay = (shouldDelay?: boolean, forcedSelectionRange?: Selection, forceKeyboardIfAlreadyFocused?: boolean) => Promise<void>;
 
-type InputType = TextInput | HTMLTextAreaElement;
+type InputType = TextInput | HTMLTextAreaElement | BaseTextInputRef;
 
 export type {Selection, FocusComposerWithDelay, InputType};

From a2f4baa726e263e6430754b90aef07a95cc06785 Mon Sep 17 00:00:00 2001
From: Bernhard Owen Josephus <bernhard.josephus@gmail.com>
Date: Fri, 19 Jun 2026 23:54:55 +0800
Subject: [PATCH 06/13] add back type

---
 src/libs/InputUtils/types.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/libs/InputUtils/types.ts b/src/libs/InputUtils/types.ts
index e9d300863887..59725fe567bd 100644
--- a/src/libs/InputUtils/types.ts
+++ b/src/libs/InputUtils/types.ts
@@ -1,7 +1,7 @@
 import type {TextInput} from 'react-native';
 import type {BaseTextInputRef} from '@components/TextInput/BaseTextInput/types';
 
-type ScrollInput = (input: TextInput | BaseTextInputRef) => void;
-type MoveSelectionToEnd = (input: TextInput | BaseTextInputRef) => void;
+type ScrollInput = (input: HTMLInputElement | TextInput | BaseTextInputRef) => void;
+type MoveSelectionToEnd = (input: HTMLInputElement | TextInput | BaseTextInputRef) => void;
 
 export type {ScrollInput, MoveSelectionToEnd};

From 1bf863e7753fa4cf7e0a0383ff098a235db285e6 Mon Sep 17 00:00:00 2001
From: Bernhard Owen Josephus <bernhard.josephus@gmail.com>
Date: Sat, 20 Jun 2026 15:15:08 +0800
Subject: [PATCH 07/13] fix type

---
 .../AdvancedFilters/TextInputFilterContent.tsx      | 13 +++++++++++--
 src/hooks/useAnimatedHighlightStyle/index.ts        |  2 ++
 src/hooks/useAutoFocusInput.ts                      |  9 ++++-----
 src/libs/InputUtils/types.ts                        |  5 ++---
 src/libs/focusAfterModalClose.ts                    |  3 +--
 src/libs/focusComposerWithDelay/types.ts            |  3 +--
 6 files changed, 21 insertions(+), 14 deletions(-)

diff --git a/src/components/Search/FilterComponents/AdvancedFilters/TextInputFilterContent.tsx b/src/components/Search/FilterComponents/AdvancedFilters/TextInputFilterContent.tsx
index a6ff60fe3b75..3803da709382 100644
--- a/src/components/Search/FilterComponents/AdvancedFilters/TextInputFilterContent.tsx
+++ b/src/components/Search/FilterComponents/AdvancedFilters/TextInputFilterContent.tsx
@@ -1,6 +1,6 @@
 import React, {useState} from 'react';
 import {View} from 'react-native';
-import type {StyleProp, ViewStyle} from 'react-native';
+import type {TextInput as RNTextInput, StyleProp, ViewStyle} from 'react-native';
 import Button from '@components/Button';
 import useTextFilterValidation from '@components/Search/hooks/useTextFilterValidation';
 import TextInput from '@components/TextInput';
@@ -26,6 +26,10 @@ type TextInputFilterContentProps = {
     onChange: (value: string | undefined) => void;
 };
 
+function isTextInput(el: BaseTextInputRef | RNTextInput | null): el is RNTextInput {
+    return !!el && 'isFocused' in el;
+}
+
 function TextInputFilterContent({filterKey, value: initialValue, autoFocus, largeButton, style, onChange}: TextInputFilterContentProps) {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
@@ -38,7 +42,12 @@ function TextInputFilterContent({filterKey, value: initialValue, autoFocus, larg
     return (
         <View style={[styles.flex1, styles.justifyContentBetween, style]}>
             <TextInput
-                ref={autoFocus ? inputCallbackRef : undefined}
+                ref={(ref) => {
+                    if (!autoFocus || !isTextInput(ref)) {
+                        return;
+                    };
+                    inputCallbackRef(ref);
+                }}
                 placeholder={label}
                 value={value}
                 errorText={error}
diff --git a/src/hooks/useAnimatedHighlightStyle/index.ts b/src/hooks/useAnimatedHighlightStyle/index.ts
index bfe03956dc2e..1faecf709030 100644
--- a/src/hooks/useAnimatedHighlightStyle/index.ts
+++ b/src/hooks/useAnimatedHighlightStyle/index.ts
@@ -93,6 +93,7 @@ export default function useAnimatedHighlightStyle({
         if (!shouldHighlight || startHighlight) {
             return;
         }
+        console.log('[debug] start the highlight');
         setStartHighlight(true);
         // We only need to add shouldHighlight as a dependency and adding startHighlight as deps will cause a loop because
         // if shouldHighlight stays at true the above early return will not be executed and this useEffect will be run
@@ -101,6 +102,7 @@ export default function useAnimatedHighlightStyle({
     }, [shouldHighlight]);
 
     React.useEffect(() => {
+        console.log('[debug] should highlight?', startHighlight, didScreenTransitionEnd);
         if (!startHighlight || !didScreenTransitionEnd) {
             return;
         }
diff --git a/src/hooks/useAutoFocusInput.ts b/src/hooks/useAutoFocusInput.ts
index a870f12cafae..d58c711a1a62 100644
--- a/src/hooks/useAutoFocusInput.ts
+++ b/src/hooks/useAutoFocusInput.ts
@@ -2,7 +2,6 @@ import {useFocusEffect, useNavigation} from '@react-navigation/native';
 import {useCallback, useEffect, useRef, useState} from 'react';
 import type {RefObject} from 'react';
 import type {TextInput} from 'react-native';
-import type {BaseTextInputRef} from '@components/TextInput/BaseTextInput/types';
 import Accessibility from '@libs/Accessibility';
 import ComposerFocusManager from '@libs/ComposerFocusManager';
 import {moveSelectionToEnd, scrollToBottom} from '@libs/InputUtils';
@@ -20,8 +19,8 @@ import useOnyx from './useOnyx';
 import useSidePanelState from './useSidePanelState';
 
 type UseAutoFocusInput = {
-    inputCallbackRef: (ref: TextInput | BaseTextInputRef | null) => void;
-    inputRef: RefObject<TextInput | BaseTextInputRef | null>;
+    inputCallbackRef: (ref: TextInput | null) => void;
+    inputRef: RefObject<TextInput | null>;
     cancelAutoFocus: () => void;
 };
 
@@ -36,7 +35,7 @@ export default function useAutoFocusInput(isMultiline = false): UseAutoFocusInpu
     const {splashScreenState} = useSplashScreenState();
     const navigation = useNavigation<PlatformStackNavigationProp<RootNavigatorParamList>>();
 
-    const inputRef = useRef<TextInput | BaseTextInputRef | null>(null);
+    const inputRef = useRef<TextInput | null>(null);
     const transitionEndTimeoutRef = useRef<NodeJS.Timeout | null>(null);
     const isAutoFocusCancelledRef = useRef(false);
 
@@ -147,7 +146,7 @@ export default function useAutoFocusInput(isMultiline = false): UseAutoFocusInpu
         }
     }
 
-    const inputCallbackRef = (ref: TextInput | BaseTextInputRef | null) => {
+    const inputCallbackRef = (ref: TextInput | null) => {
         inputRef.current = ref;
         if (isInputInitialized) {
             return;
diff --git a/src/libs/InputUtils/types.ts b/src/libs/InputUtils/types.ts
index 59725fe567bd..c0be24244475 100644
--- a/src/libs/InputUtils/types.ts
+++ b/src/libs/InputUtils/types.ts
@@ -1,7 +1,6 @@
 import type {TextInput} from 'react-native';
-import type {BaseTextInputRef} from '@components/TextInput/BaseTextInput/types';
 
-type ScrollInput = (input: HTMLInputElement | TextInput | BaseTextInputRef) => void;
-type MoveSelectionToEnd = (input: HTMLInputElement | TextInput | BaseTextInputRef) => void;
+type ScrollInput = (input: HTMLInputElement | TextInput) => void;
+type MoveSelectionToEnd = (input: HTMLInputElement | TextInput) => void;
 
 export type {ScrollInput, MoveSelectionToEnd};
diff --git a/src/libs/focusAfterModalClose.ts b/src/libs/focusAfterModalClose.ts
index 914f58ebf764..cad25cefc2ac 100644
--- a/src/libs/focusAfterModalClose.ts
+++ b/src/libs/focusAfterModalClose.ts
@@ -1,9 +1,8 @@
 import type {TextInput} from 'react-native';
-import type {BaseTextInputRef} from '@components/TextInput/BaseTextInput/types';
 import ComposerFocusManager from './ComposerFocusManager';
 import isWindowReadyToFocus from './isWindowReadyToFocus';
 
-function focusAfterModalClose(textInput: TextInput | BaseTextInputRef | null) {
+function focusAfterModalClose(textInput: TextInput | null) {
     if (!textInput) {
         return;
     }
diff --git a/src/libs/focusComposerWithDelay/types.ts b/src/libs/focusComposerWithDelay/types.ts
index cd8ee679e0d0..1447161e88f2 100644
--- a/src/libs/focusComposerWithDelay/types.ts
+++ b/src/libs/focusComposerWithDelay/types.ts
@@ -1,5 +1,4 @@
 import type {TextInput} from 'react-native';
-import type {BaseTextInputRef} from '@components/TextInput/BaseTextInput/types';
 
 type Selection = {
     start: number;
@@ -10,6 +9,6 @@ type Selection = {
 
 type FocusComposerWithDelay = (shouldDelay?: boolean, forcedSelectionRange?: Selection, forceKeyboardIfAlreadyFocused?: boolean) => Promise<void>;
 
-type InputType = TextInput | HTMLTextAreaElement | BaseTextInputRef;
+type InputType = TextInput | HTMLTextAreaElement;
 
 export type {Selection, FocusComposerWithDelay, InputType};

From 71c09ac1c17166510bc1a32a3100293c31a5770f Mon Sep 17 00:00:00 2001
From: Bernhard Owen Josephus <bernhard.josephus@gmail.com>
Date: Sat, 20 Jun 2026 15:20:48 +0800
Subject: [PATCH 08/13] prettier

---
 .../FilterComponents/AdvancedFilters/TextInputFilterContent.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Search/FilterComponents/AdvancedFilters/TextInputFilterContent.tsx b/src/components/Search/FilterComponents/AdvancedFilters/TextInputFilterContent.tsx
index 3803da709382..35d4b646e8ba 100644
--- a/src/components/Search/FilterComponents/AdvancedFilters/TextInputFilterContent.tsx
+++ b/src/components/Search/FilterComponents/AdvancedFilters/TextInputFilterContent.tsx
@@ -45,7 +45,7 @@ function TextInputFilterContent({filterKey, value: initialValue, autoFocus, larg
                 ref={(ref) => {
                     if (!autoFocus || !isTextInput(ref)) {
                         return;
-                    };
+                    }
                     inputCallbackRef(ref);
                 }}
                 placeholder={label}

From 875894ba8b81d5f848145d73605deac6d00c49d4 Mon Sep 17 00:00:00 2001
From: Bernhard Owen Josephus <bernhard.josephus@gmail.com>
Date: Sat, 20 Jun 2026 15:42:29 +0800
Subject: [PATCH 09/13] remove log

---
 src/hooks/useAnimatedHighlightStyle/index.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/hooks/useAnimatedHighlightStyle/index.ts b/src/hooks/useAnimatedHighlightStyle/index.ts
index 1faecf709030..bfe03956dc2e 100644
--- a/src/hooks/useAnimatedHighlightStyle/index.ts
+++ b/src/hooks/useAnimatedHighlightStyle/index.ts
@@ -93,7 +93,6 @@ export default function useAnimatedHighlightStyle({
         if (!shouldHighlight || startHighlight) {
             return;
         }
-        console.log('[debug] start the highlight');
         setStartHighlight(true);
         // We only need to add shouldHighlight as a dependency and adding startHighlight as deps will cause a loop because
         // if shouldHighlight stays at true the above early return will not be executed and this useEffect will be run
@@ -102,7 +101,6 @@ export default function useAnimatedHighlightStyle({
     }, [shouldHighlight]);
 
     React.useEffect(() => {
-        console.log('[debug] should highlight?', startHighlight, didScreenTransitionEnd);
         if (!startHighlight || !didScreenTransitionEnd) {
             return;
         }

From 39d29cf7dd3746fb97d35654e035c9438f710948 Mon Sep 17 00:00:00 2001
From: Bernhard Owen Josephus <bernhard.josephus@gmail.com>
Date: Wed, 1 Jul 2026 17:48:15 +0800
Subject: [PATCH 10/13] add searchtextfilterkeys back

---
 src/components/Search/types.ts | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/src/components/Search/types.ts b/src/components/Search/types.ts
index abd2d3fcca4b..634d2b4cf2df 100644
--- a/src/components/Search/types.ts
+++ b/src/components/Search/types.ts
@@ -284,6 +284,16 @@ type ReportFieldNegatedKey = `${typeof CONST.SEARCH.REPORT_FIELD.NOT_PREFIX}${st
 type ReportFieldDateKey = `${typeof CONST.SEARCH.REPORT_FIELD.GLOBAL_PREFIX}${ValueOf<typeof CONST.SEARCH.DATE_MODIFIERS>}-${string}`;
 type ReportFieldKey = ReportFieldTextKey | ReportFieldDateKey | ReportFieldNegatedKey;
 
+type SearchTextFilterKeys =
+    | typeof CONST.SEARCH.SYNTAX_FILTER_KEYS.MERCHANT
+    | typeof CONST.SEARCH.SYNTAX_FILTER_KEYS.DESCRIPTION
+    | typeof CONST.SEARCH.SYNTAX_FILTER_KEYS.REPORT_ID
+    | typeof CONST.SEARCH.SYNTAX_FILTER_KEYS.KEYWORD
+    | typeof CONST.SEARCH.SYNTAX_FILTER_KEYS.TITLE
+    | typeof CONST.SEARCH.SYNTAX_FILTER_KEYS.WITHDRAWAL_ID
+    | typeof CONST.SEARCH.SYNTAX_ROOT_KEYS.LIMIT
+    | ReportFieldTextKey;
+
 type SearchDateFilterKeys =
     | typeof CONST.SEARCH.SYNTAX_FILTER_KEYS.DATE
     | typeof CONST.SEARCH.SYNTAX_FILTER_KEYS.SUBMITTED
@@ -477,6 +487,7 @@ export type {
     SearchWithdrawalStatus,
     UserFriendlyValue,
     SelectedReports,
+    SearchTextFilterKeys,
     BankAccountMenuItem,
     SearchCustomColumnIds,
     GroupedItem,

From a72588c1b7d6effe5a8965d9f8149ff9359fa576 Mon Sep 17 00:00:00 2001
From: Bernhard Owen Josephus <bernhard.josephus@gmail.com>
Date: Fri, 3 Jul 2026 16:39:11 +0800
Subject: [PATCH 11/13] fix missing import

---
 .../AdvancedFilters/ReportFieldFilterContent.tsx                | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Search/FilterComponents/AdvancedFilters/ReportFieldFilterContent.tsx b/src/components/Search/FilterComponents/AdvancedFilters/ReportFieldFilterContent.tsx
index 05531ca96ec1..92508406ae89 100644
--- a/src/components/Search/FilterComponents/AdvancedFilters/ReportFieldFilterContent.tsx
+++ b/src/components/Search/FilterComponents/AdvancedFilters/ReportFieldFilterContent.tsx
@@ -10,7 +10,7 @@ import type {PolicyReportField} from '@src/types/onyx';
 
 import type {StyleProp, ViewStyle} from 'react-native';
 
-import React, {useRef} from 'react';
+import React, {useRef, useState} from 'react';
 
 type ReportFieldFilterContentProps = {
     values: Partial<SearchAdvancedFiltersForm> | undefined;

From d1d69eb75735c570122afdd2c8328ea70db80752 Mon Sep 17 00:00:00 2001
From: Bernhard Owen Josephus <bernhard.josephus@gmail.com>
Date: Sat, 4 Jul 2026 09:26:05 +0800
Subject: [PATCH 12/13] reset error on unmount

---
 .../Search/hooks/useTextFilterValidation.tsx           | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/components/Search/hooks/useTextFilterValidation.tsx b/src/components/Search/hooks/useTextFilterValidation.tsx
index 2c06f04cfc00..bc368e019c5d 100644
--- a/src/components/Search/hooks/useTextFilterValidation.tsx
+++ b/src/components/Search/hooks/useTextFilterValidation.tsx
@@ -6,7 +6,7 @@ import {isValidInputLength} from '@libs/ValidationUtils';
 
 import CONST from '@src/CONST';
 
-import {useEffect} from 'react';
+import {useEffect, useEffectEvent} from 'react';
 
 const FILTER_MAX_LENGTH: Partial<Record<SearchTextFilterKeys, number>> = {
     [CONST.SEARCH.SYNTAX_FILTER_KEYS.DESCRIPTION]: CONST.DESCRIPTION_LIMIT,
@@ -20,9 +20,13 @@ function useTextFilterValidation(filterKey: SearchTextFilterKeys, value: string
     const {isValid, byteLength} = isValidInputLength(value?.trim() ?? '', maxLength);
     const error = !isValid ? translate('common.error.characterLimitExceedCounter', byteLength, maxLength) : undefined;
 
+    const onErrorCallback = useEffectEvent((err?: string) => onError?.(err));
+
     useEffect(() => {
-        onError?.(error);
-    }, [error, onError]);
+        onErrorCallback(error);
+    }, [error]);
+
+    useEffect(() => () => onErrorCallback(), []);
 
     return error;
 }

From c599c2682e641e3da9ba9d76b0e8f2927bed8eda Mon Sep 17 00:00:00 2001
From: Bernhard Owen Josephus <bernhard.josephus@gmail.com>
Date: Tue, 7 Jul 2026 10:16:43 +0800
Subject: [PATCH 13/13] change variable name

---
 .../AdvancedFilters/TextInputFilterContent.tsx                | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Search/FilterComponents/AdvancedFilters/TextInputFilterContent.tsx b/src/components/Search/FilterComponents/AdvancedFilters/TextInputFilterContent.tsx
index b8631f377f70..cadc0d8dab00 100644
--- a/src/components/Search/FilterComponents/AdvancedFilters/TextInputFilterContent.tsx
+++ b/src/components/Search/FilterComponents/AdvancedFilters/TextInputFilterContent.tsx
@@ -31,8 +31,8 @@ type TextInputFilterContentProps = {
     onChange: (value: string | undefined) => void;
 };
 
-function isTextInput(el: BaseTextInputRef | RNTextInput | null): el is RNTextInput {
-    return !!el && 'isFocused' in el;
+function isTextInput(element: BaseTextInputRef | RNTextInput | null): element is RNTextInput {
+    return !!element && 'isFocused' in element;
 }
 
 function TextInputFilterContent({filterKey, value: initialValue, autoFocus, largeButton, style, onChange}: TextInputFilterContentProps) {