From 0b6de4da9ba064acd79f62b7bbbeefa947e7c2fa Mon Sep 17 00:00:00 2001
From: Bernhard Owen Josephus <bernhard.josephus@gmail.com>
Date: Thu, 30 Apr 2026 17:29:35 +0800
Subject: [PATCH 1/5] add close button to filter chip to clear individual
 filter

---
 .../Search/FilterDropdowns/DropdownButton.tsx | 70 +++++++++++++------
 .../SearchPageHeader/SearchFilterBar.tsx      | 19 +++--
 .../SearchPageHeader/useSearchFiltersBar.tsx  | 38 ++++++++--
 3 files changed, 97 insertions(+), 30 deletions(-)

diff --git a/src/components/Search/FilterDropdowns/DropdownButton.tsx b/src/components/Search/FilterDropdowns/DropdownButton.tsx
index f3417baa889e..c86b6ac705e6 100644
--- a/src/components/Search/FilterDropdowns/DropdownButton.tsx
+++ b/src/components/Search/FilterDropdowns/DropdownButton.tsx
@@ -5,13 +5,16 @@ import type {StyleProp, TextStyle, ViewStyle} from 'react-native';
 import {View} from 'react-native';
 import Button from '@components/Button';
 import CaretWrapper from '@components/CaretWrapper';
+import Icon from '@components/Icon';
 import PopoverWithMeasuredContent from '@components/PopoverWithMeasuredContent';
 import Text from '@components/Text';
 import withViewportOffsetTop from '@components/withViewportOffsetTop';
+import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
 import useOnyx from '@hooks/useOnyx';
 import usePopoverPosition from '@hooks/usePopoverPosition';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useStyleUtils from '@hooks/useStyleUtils';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import variables from '@styles/variables';
@@ -56,6 +59,7 @@ type DropdownButtonProps = WithSentryLabel & {
 
     /** Wrapper style for the outer view */
     wrapperStyle?: StyleProp<ViewStyle>;
+    onClosePress?: () => void;
 };
 
 const ANCHOR_ORIGIN = {
@@ -75,13 +79,16 @@ function DropdownButton({
     caretWrapperStyle,
     wrapperStyle,
     sentryLabel,
+    onClosePress,
 }: DropdownButtonProps) {
     // We need to use isSmallScreenWidth instead of shouldUseNarrowLayout to distinguish RHL and narrow layout
     // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth
     const {isSmallScreenWidth} = useResponsiveLayout();
+    const icons = useMemoizedLazyExpensifyIcons(['Close']);
 
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
+    const theme = useTheme();
     const {windowHeight} = useWindowDimensions();
     const triggerRef = useRef<View | null>(null);
     const anchorRef = useRef<View | null>(null);
@@ -144,6 +151,8 @@ function DropdownButton({
         return PopoverComponent({closeOverlay: toggleOverlay, isExpanded: isOverlayVisible, setPopoverWidth: setCustomPopoverWidth});
     }, [PopoverComponent, toggleOverlay, isOverlayVisible]);
 
+    const showCloseButton = !!onClosePress;
+
     return (
         <View
             ref={anchorRef}
@@ -156,28 +165,49 @@ function DropdownButton({
                     onPress={calculatePopoverPositionAndToggleOverlay}
                 />
             ) : (
-                <Button
-                    ref={triggerRef}
-                    innerStyles={[isOverlayVisible && styles.buttonHoveredBG, {maxWidth: 256}, innerStyles]}
-                    onPress={calculatePopoverPositionAndToggleOverlay}
-                    sentryLabel={sentryLabel}
-                    // eslint-disable-next-line react/jsx-props-no-spreading
-                    {...(medium ? {medium: true} : {small: true})}
-                >
-                    <CaretWrapper
-                        style={[styles.flex1, styles.mw100, caretWrapperStyle]}
-                        caretWidth={medium ? variables.iconSizeSmall : variables.iconSizeExtraSmall}
-                        caretHeight={medium ? variables.iconSizeSmall : variables.iconSizeExtraSmall}
-                        isActive={isOverlayVisible}
+                <View style={[styles.flexRow]}>
+                    <Button
+                        ref={triggerRef}
+                        innerStyles={[isOverlayVisible && styles.buttonHoveredBG, {maxWidth: 256}, innerStyles, showCloseButton && styles.pr2]}
+                        onPress={calculatePopoverPositionAndToggleOverlay}
+                        sentryLabel={sentryLabel}
+                        shouldRemoveRightBorderRadius={showCloseButton}
+                        // eslint-disable-next-line react/jsx-props-no-spreading
+                        {...(medium ? {medium: true} : {small: true})}
                     >
-                        <Text
-                            numberOfLines={1}
-                            style={[styles.textMicroBold, styles.flexShrink1, labelStyle]}
+                        <CaretWrapper
+                            style={[styles.flex1, styles.mw100, caretWrapperStyle]}
+                            caretWidth={medium ? variables.iconSizeSmall : variables.iconSizeExtraSmall}
+                            caretHeight={medium ? variables.iconSizeSmall : variables.iconSizeExtraSmall}
+                            isActive={isOverlayVisible}
                         >
-                            {buttonText}
-                        </Text>
-                    </CaretWrapper>
-                </Button>
+                            <Text
+                                numberOfLines={1}
+                                style={[styles.textMicroBold, styles.flexShrink1, labelStyle]}
+                            >
+                                {buttonText}
+                            </Text>
+                        </CaretWrapper>
+                    </Button>
+                    {showCloseButton && (
+                        <>
+                            <View style={[styles.buttonDivider]} />
+                            <Button
+                                small
+                                shouldRemoveLeftBorderRadius
+                                innerStyles={[styles.pl0, styles.pr0half, styles.dropDownButtonCartIcon]}
+                                onPress={onClosePress}
+                            >
+                                <Icon
+                                    src={icons.Close}
+                                    fill={theme.icon}
+                                    width={variables.iconSizeXXSmall}
+                                    height={variables.iconSizeXXSmall}
+                                />
+                            </Button>
+                        </>
+                    )}
+                </View>
             )}
 
             {/* Dropdown overlay */}
diff --git a/src/components/Search/SearchPageHeader/SearchFilterBar.tsx b/src/components/Search/SearchPageHeader/SearchFilterBar.tsx
index 7cea47d9a294..b98d8f107050 100644
--- a/src/components/Search/SearchPageHeader/SearchFilterBar.tsx
+++ b/src/components/Search/SearchPageHeader/SearchFilterBar.tsx
@@ -14,7 +14,7 @@ import type {FilterItem} from './useSearchFiltersBar';
 
 type SearchDropdownProps = Omit<DropdownButtonProps, 'viewportOffsetTop'>;
 
-function UserDropdown({label, value, PopoverComponent, sentryLabel}: SearchDropdownProps) {
+function UserDropdown({label, value, PopoverComponent, sentryLabel, onClosePress}: SearchDropdownProps) {
     const users = useFilterUserValue(value);
     return (
         <DropdownButton
@@ -22,11 +22,12 @@ function UserDropdown({label, value, PopoverComponent, sentryLabel}: SearchDropd
             value={users ?? []}
             PopoverComponent={PopoverComponent}
             sentryLabel={sentryLabel}
+            onClosePress={onClosePress}
         />
     );
 }
 
-function WorkspaceDropdown({label, value, PopoverComponent, sentryLabel}: SearchDropdownProps) {
+function WorkspaceDropdown({label, value, PopoverComponent, sentryLabel, onClosePress}: SearchDropdownProps) {
     const workspaceValue = useFilterWorkspaceValue(value);
     return (
         <DropdownButton
@@ -34,11 +35,12 @@ function WorkspaceDropdown({label, value, PopoverComponent, sentryLabel}: Search
             value={workspaceValue ?? []}
             PopoverComponent={PopoverComponent}
             sentryLabel={sentryLabel}
+            onClosePress={onClosePress}
         />
     );
 }
 
-function FeedDropdown({label, PopoverComponent, sentryLabel}: SearchDropdownProps) {
+function FeedDropdown({label, PopoverComponent, sentryLabel, onClosePress}: SearchDropdownProps) {
     const feedValue = useFilterFeedValue();
     return (
         <DropdownButton
@@ -46,11 +48,12 @@ function FeedDropdown({label, PopoverComponent, sentryLabel}: SearchDropdownProp
             value={feedValue}
             PopoverComponent={PopoverComponent}
             sentryLabel={sentryLabel}
+            onClosePress={onClosePress}
         />
     );
 }
 
-function CardDropdown({label, PopoverComponent, sentryLabel}: SearchDropdownProps) {
+function CardDropdown({label, PopoverComponent, sentryLabel, onClosePress}: SearchDropdownProps) {
     const cardValue = useFilterCardValue();
     return (
         <DropdownButton
@@ -58,11 +61,12 @@ function CardDropdown({label, PopoverComponent, sentryLabel}: SearchDropdownProp
             value={cardValue}
             PopoverComponent={PopoverComponent}
             sentryLabel={sentryLabel}
+            onClosePress={onClosePress}
         />
     );
 }
 
-function TaxRateDropdown({label, PopoverComponent, sentryLabel}: SearchDropdownProps) {
+function TaxRateDropdown({label, PopoverComponent, sentryLabel, onClosePress}: SearchDropdownProps) {
     const taxRateValue = useFilterTaxRateValue();
     return (
         <DropdownButton
@@ -70,11 +74,12 @@ function TaxRateDropdown({label, PopoverComponent, sentryLabel}: SearchDropdownP
             value={taxRateValue}
             PopoverComponent={PopoverComponent}
             sentryLabel={sentryLabel}
+            onClosePress={onClosePress}
         />
     );
 }
 
-function ReportDropdown({label, value, PopoverComponent, sentryLabel}: SearchDropdownProps) {
+function ReportDropdown({label, value, PopoverComponent, sentryLabel, onClosePress}: SearchDropdownProps) {
     const reportValue = useFilterReportValue(value);
     return (
         <DropdownButton
@@ -82,6 +87,7 @@ function ReportDropdown({label, value, PopoverComponent, sentryLabel}: SearchDro
             value={reportValue}
             PopoverComponent={PopoverComponent}
             sentryLabel={sentryLabel}
+            onClosePress={onClosePress}
         />
     );
 }
@@ -111,6 +117,7 @@ function SearchFilterBar({item}: {item: SearchFilter & FilterItem}) {
             value={item.value}
             PopoverComponent={item.PopoverComponent}
             sentryLabel={item.sentryLabel}
+            onClosePress={item.onClosePress}
         />
     );
 }
diff --git a/src/components/Search/SearchPageHeader/useSearchFiltersBar.tsx b/src/components/Search/SearchPageHeader/useSearchFiltersBar.tsx
index 01227e6d2fb9..2c19e66a7f21 100644
--- a/src/components/Search/SearchPageHeader/useSearchFiltersBar.tsx
+++ b/src/components/Search/SearchPageHeader/useSearchFiltersBar.tsx
@@ -41,6 +41,7 @@ import MultiSelectFilterPopup from './MultiSelectFilterPopup';
 
 type FilterItem = WithSentryLabel & {
     PopoverComponent: (props: PopoverComponentProps) => ReactNode;
+    onClosePress: () => void;
 };
 
 type UseSearchFiltersBarResult = {
@@ -121,6 +122,13 @@ function makeDateFilterItem(
             />
         ),
         sentryLabel: getFilterSentryLabel(filterKey),
+        onClosePress: () =>
+            updateFilterForm({
+                [`${filterKey}${CONST.SEARCH.DATE_MODIFIERS.ON}`]: undefined,
+                [`${filterKey}${CONST.SEARCH.DATE_MODIFIERS.BEFORE}`]: undefined,
+                [`${filterKey}${CONST.SEARCH.DATE_MODIFIERS.AFTER}`]: undefined,
+                [`${filterKey}${CONST.SEARCH.DATE_MODIFIERS.RANGE}`]: undefined,
+            }),
     };
 }
 
@@ -146,6 +154,12 @@ function makeAmountFilterItem(
             />
         ),
         sentryLabel: getFilterSentryLabel(filterKey),
+        onClosePress: () =>
+            updateFilterForm({
+                [`${filterKey}${CONST.SEARCH.AMOUNT_MODIFIERS.EQUAL_TO}`]: undefined,
+                [`${filterKey}${CONST.SEARCH.AMOUNT_MODIFIERS.GREATER_THAN}`]: undefined,
+                [`${filterKey}${CONST.SEARCH.AMOUNT_MODIFIERS.LESS_THAN}`]: undefined,
+            }),
     };
 }
 
@@ -210,12 +224,21 @@ function useSearchFiltersBar(queryJSON: SearchQueryJSON): UseSearchFiltersBarRes
                     />
                 ),
                 sentryLabel: getFilterSentryLabel(filterKey),
+                onClosePress: () => {
+                    const formValues = Object.keys(searchAdvancedFiltersForm).reduce((acc, curr) => {
+                        if (curr.startsWith(CONST.SEARCH.REPORT_FIELD.GLOBAL_PREFIX)) {
+                            acc[curr as SearchAdvancedFiltersKey] = undefined;
+                        }
+                        return acc;
+                    }, {} as Partial<SearchAdvancedFiltersForm>);
+                    updateFilterForm(formValues);
+                },
             };
         }
 
         const label = FILTER_LABEL_MAP[filterKey];
         if (!label) {
-            return {PopoverComponent: () => null};
+            return {PopoverComponent: () => null, onClosePress: () => {}};
         }
 
         switch (filterKey) {
@@ -239,6 +262,7 @@ function useSearchFiltersBar(queryJSON: SearchQueryJSON): UseSearchFiltersBarRes
                         />
                     ),
                     sentryLabel: getFilterSentryLabel(filterKey),
+                    onClosePress: () => updateFilterForm({[filterKey]: undefined}),
                 };
             }
             case FILTER_KEYS.CARD_ID: {
@@ -251,6 +275,7 @@ function useSearchFiltersBar(queryJSON: SearchQueryJSON): UseSearchFiltersBarRes
                         />
                     ),
                     sentryLabel: getFilterSentryLabel(filterKey),
+                    onClosePress: () => updateFilterForm({[filterKey]: undefined}),
                 };
             }
             case FILTER_KEYS.FEED: {
@@ -263,6 +288,7 @@ function useSearchFiltersBar(queryJSON: SearchQueryJSON): UseSearchFiltersBarRes
                         />
                     ),
                     sentryLabel: getFilterSentryLabel(filterKey),
+                    onClosePress: () => updateFilterForm({[filterKey]: undefined}),
                 };
             }
             case FILTER_KEYS.MERCHANT:
@@ -282,6 +308,7 @@ function useSearchFiltersBar(queryJSON: SearchQueryJSON): UseSearchFiltersBarRes
                         />
                     ),
                     sentryLabel: getFilterSentryLabel(filterKey),
+                    onClosePress: () => updateFilterForm({[filterKey]: undefined}),
                 };
             }
             case FILTER_KEYS.CURRENCY:
@@ -300,6 +327,7 @@ function useSearchFiltersBar(queryJSON: SearchQueryJSON): UseSearchFiltersBarRes
                         />
                     ),
                     sentryLabel: getFilterSentryLabel(filterKey),
+                    onClosePress: () => updateFilterForm({[filterKey]: undefined}),
                 };
             }
             case FILTER_KEYS.BILLABLE:
@@ -317,7 +345,7 @@ function useSearchFiltersBar(queryJSON: SearchQueryJSON): UseSearchFiltersBarRes
                         onChange={(item) => updateFilterForm({[filterKey]: item?.value})}
                     />
                 );
-                return {PopoverComponent: singleSelectComponent, sentryLabel: getFilterSentryLabel(filterKey)};
+                return {PopoverComponent: singleSelectComponent, sentryLabel: getFilterSentryLabel(filterKey), onClosePress: () => updateFilterForm({[filterKey]: undefined})};
             }
             case FILTER_KEYS.HAS:
             case FILTER_KEYS.IS:
@@ -350,7 +378,7 @@ function useSearchFiltersBar(queryJSON: SearchQueryJSON): UseSearchFiltersBarRes
                     />
                 );
 
-                return {PopoverComponent: multiSelectComponent, sentryLabel: getFilterSentryLabel(filterKey)};
+                return {PopoverComponent: multiSelectComponent, sentryLabel: getFilterSentryLabel(filterKey), onClosePress: () => updateFilterForm({[filterKey]: undefined})};
             }
             case FILTER_KEYS.ASSIGNEE:
             case FILTER_KEYS.ATTENDEE:
@@ -370,6 +398,7 @@ function useSearchFiltersBar(queryJSON: SearchQueryJSON): UseSearchFiltersBarRes
                         />
                     ),
                     sentryLabel: getFilterSentryLabel(filterKey),
+                    onClosePress: () => updateFilterForm({[filterKey]: undefined}),
                 };
             case FILTER_KEYS.POLICY_ID:
                 return {
@@ -381,10 +410,11 @@ function useSearchFiltersBar(queryJSON: SearchQueryJSON): UseSearchFiltersBarRes
                         />
                     ),
                     sentryLabel: getFilterSentryLabel(filterKey),
+                    onClosePress: () => updateFilterForm({[filterKey]: undefined}),
                 };
             default:
                 // This should be unreachable
-                return {PopoverComponent: () => null};
+                return {PopoverComponent: () => null, onClosePress: () => {}};
         }
     });
 

From c64aa97793390de445fdf1a3730f69fbeec2815e Mon Sep 17 00:00:00 2001
From: Bernhard Owen Josephus <bernhard.josephus@gmail.com>
Date: Thu, 30 Apr 2026 23:50:51 +0800
Subject: [PATCH 2/5] don't show keyword filter chip

---
 src/components/Search/SearchPageHeader/useSearchFiltersBar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Search/SearchPageHeader/useSearchFiltersBar.tsx b/src/components/Search/SearchPageHeader/useSearchFiltersBar.tsx
index 2c19e66a7f21..4e9d0652c910 100644
--- a/src/components/Search/SearchPageHeader/useSearchFiltersBar.tsx
+++ b/src/components/Search/SearchPageHeader/useSearchFiltersBar.tsx
@@ -62,6 +62,7 @@ const SKIPPED_FILTERS = new Set<SearchAdvancedFiltersKey>([
     FILTER_KEYS.PAYER,
     FILTER_KEYS.ACTION,
     FILTER_KEYS.COLUMNS,
+    FILTER_KEYS.KEYWORD,
 ]);
 
 function getFilterSentryLabel(filterKey: SearchAdvancedFiltersKey | SearchFilterKey | ReportFieldKey) {
@@ -294,7 +295,6 @@ function useSearchFiltersBar(queryJSON: SearchQueryJSON): UseSearchFiltersBarRes
             case FILTER_KEYS.MERCHANT:
             case FILTER_KEYS.DESCRIPTION:
             case FILTER_KEYS.REPORT_ID:
-            case FILTER_KEYS.KEYWORD:
             case FILTER_KEYS.TITLE:
             case FILTER_KEYS.WITHDRAWAL_ID: {
                 return {

From a82ab16a8d06dc56c2b08fdaca35d87186739333 Mon Sep 17 00:00:00 2001
From: Bernhard Owen Josephus <bernhard.josephus@gmail.com>
Date: Fri, 1 May 2026 00:01:59 +0800
Subject: [PATCH 3/5] update width to 24

---
 src/components/Search/FilterDropdowns/DropdownButton.tsx | 2 +-
 src/styles/index.ts                                      | 4 ++++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/Search/FilterDropdowns/DropdownButton.tsx b/src/components/Search/FilterDropdowns/DropdownButton.tsx
index c86b6ac705e6..053368ec939f 100644
--- a/src/components/Search/FilterDropdowns/DropdownButton.tsx
+++ b/src/components/Search/FilterDropdowns/DropdownButton.tsx
@@ -195,7 +195,7 @@ function DropdownButton({
                             <Button
                                 small
                                 shouldRemoveLeftBorderRadius
-                                innerStyles={[styles.pl0, styles.pr0half, styles.dropDownButtonCartIcon]}
+                                innerStyles={[styles.pl0, styles.pr0half, styles.filterDropDownCloseIcon]}
                                 onPress={onClosePress}
                             >
                                 <Icon
diff --git a/src/styles/index.ts b/src/styles/index.ts
index b6293c6f4dd8..acbcb0c7bc0f 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -4442,6 +4442,10 @@ const staticStyles = (theme: ThemeColors) =>
             minWidth: 22,
         },
 
+        filterDropDownCloseIcon: {
+            minWidth: 24,
+        },
+
         dropDownSmallButtonArrowContain: {
             marginLeft: 3,
             marginRight: 6,

From 1db539d1142fec8a4927f45124439ea778ba9e7b Mon Sep 17 00:00:00 2001
From: Bernhard Owen Josephus <bernhard.josephus@gmail.com>
Date: Fri, 1 May 2026 11:05:56 +0800
Subject: [PATCH 4/5] remove clear button margin

---
 src/components/Search/SearchAutocompleteInput.tsx           | 6 +++---
 .../Search/SearchPageHeader/SearchPageInputWide.tsx         | 1 +
 .../TextInput/BaseTextInput/implementation/index.native.tsx | 3 ++-
 .../TextInput/BaseTextInput/implementation/index.tsx        | 3 ++-
 src/components/TextInput/BaseTextInput/types.ts             | 3 +++
 5 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/components/Search/SearchAutocompleteInput.tsx b/src/components/Search/SearchAutocompleteInput.tsx
index af3ce43d86c4..e4e2e075bf53 100644
--- a/src/components/Search/SearchAutocompleteInput.tsx
+++ b/src/components/Search/SearchAutocompleteInput.tsx
@@ -58,12 +58,10 @@ type SearchAutocompleteInputProps = {
 
     /** Any additional styles to apply to text input along with FormHelperMessage */
     outerWrapperStyle?: StyleProp<ViewStyle>;
-
     inputStyle?: StyleProp<TextStyle>;
-
     inputContainerStyle?: StyleProp<ViewStyle>;
-
     touchableInputWrapperStyle?: StyleProp<ViewStyle>;
+    clearButtonStyle?: StyleProp<ViewStyle>;
 
     /** Whether the search reports API call is running  */
     isSearchingForReports?: boolean;
@@ -96,6 +94,7 @@ function SearchAutocompleteInput({
     inputStyle,
     inputContainerStyle,
     touchableInputWrapperStyle,
+    clearButtonStyle,
     isSearchingForReports,
     selection,
     substitutionMap,
@@ -222,6 +221,7 @@ function SearchAutocompleteInput({
                     textInputContainerStyles={[styles.borderNone, styles.pb0, styles.ph3, inputContainerStyle]}
                     inputStyle={[inputWidth, styles.lineHeightUndefined, inputStyle]}
                     touchableInputWrapperStyle={touchableInputWrapperStyle}
+                    clearButtonStyle={clearButtonStyle}
                     placeholderTextColor={theme.textSupporting}
                     loadingSpinnerStyle={[styles.mt0, styles.mr1, styles.justifyContentCenter]}
                     onFocus={() => {
diff --git a/src/components/Search/SearchPageHeader/SearchPageInputWide.tsx b/src/components/Search/SearchPageHeader/SearchPageInputWide.tsx
index ea57d862fdb8..bd3b50034ddc 100644
--- a/src/components/Search/SearchPageHeader/SearchPageInputWide.tsx
+++ b/src/components/Search/SearchPageHeader/SearchPageInputWide.tsx
@@ -74,6 +74,7 @@ function SearchPageInputWide({queryJSON, handleSearch}: SearchPageInputWideProps
                     inputStyle={isAutocompleteListVisible ? undefined : styles.fontSizeLabel}
                     inputContainerStyle={isAutocompleteListVisible ? undefined : styles.ph2}
                     touchableInputWrapperStyle={isAutocompleteListVisible ? undefined : styles.searchPageInputWideTouchableWrapper}
+                    clearButtonStyle={isAutocompleteListVisible ? undefined : styles.mh0}
                     onSubmit={() => {
                         const focusedOption = listRef.current?.getFocusedOption();
                         if (focusedOption) {
diff --git a/src/components/TextInput/BaseTextInput/implementation/index.native.tsx b/src/components/TextInput/BaseTextInput/implementation/index.native.tsx
index 39f8b0adc516..7f8967d929b1 100644
--- a/src/components/TextInput/BaseTextInput/implementation/index.native.tsx
+++ b/src/components/TextInput/BaseTextInput/implementation/index.native.tsx
@@ -80,6 +80,7 @@ function BaseTextInput({
     placeholderTextColor,
     onClearInput,
     iconContainerStyle,
+    clearButtonStyle,
     shouldUseDefaultLineHeightForPrefix = true,
     ref,
     sentryLabel,
@@ -452,7 +453,7 @@ function BaseTextInput({
                                         setValue('');
                                         onClearInput?.();
                                     }}
-                                    style={[StyleUtils.getTextInputIconContainerStyles(hasLabel, false, verticalPaddingDiff)]}
+                                    style={[StyleUtils.getTextInputIconContainerStyles(hasLabel, false, verticalPaddingDiff), clearButtonStyle]}
                                 />
                             )}
                             {!!inputProps.isLoading && !shouldShowClearButton && (
diff --git a/src/components/TextInput/BaseTextInput/implementation/index.tsx b/src/components/TextInput/BaseTextInput/implementation/index.tsx
index 35f0d3e19d2b..7de0f789caa6 100644
--- a/src/components/TextInput/BaseTextInput/implementation/index.tsx
+++ b/src/components/TextInput/BaseTextInput/implementation/index.tsx
@@ -82,6 +82,7 @@ function BaseTextInput({
     placeholderTextColor,
     onClearInput,
     iconContainerStyle,
+    clearButtonStyle,
     shouldUseDefaultLineHeightForPrefix = true,
     ref,
     sentryLabel,
@@ -528,7 +529,7 @@ function BaseTextInput({
                                             setValue('');
                                             onClearInput?.();
                                         }}
-                                        style={[StyleUtils.getTextInputIconContainerStyles(hasLabel, false, verticalPaddingDiff)]}
+                                        style={[StyleUtils.getTextInputIconContainerStyles(hasLabel, false, verticalPaddingDiff), clearButtonStyle]}
                                         sentryLabel={sentryLabel ? `${sentryLabel}-ClearButton` : undefined}
                                     />
                                 </View>
diff --git a/src/components/TextInput/BaseTextInput/types.ts b/src/components/TextInput/BaseTextInput/types.ts
index bf3e11a4c4c4..123cfeb1c85f 100644
--- a/src/components/TextInput/BaseTextInput/types.ts
+++ b/src/components/TextInput/BaseTextInput/types.ts
@@ -165,6 +165,9 @@ type CustomBaseTextInputProps = ForwardedFSClassProps &
         /** Style for the icon container */
         iconContainerStyle?: StyleProp<ViewStyle>;
 
+        /** Style for the clear button */
+        clearButtonStyle?: StyleProp<ViewStyle>;
+
         /** The width of inner content */
         contentWidth?: number;
 

From 0b826eff22f86af2dddaef70a3d6be0ea8168158 Mon Sep 17 00:00:00 2001
From: Bernhard Owen Josephus <bernhard.josephus@gmail.com>
Date: Sat, 2 May 2026 11:34:59 +0800
Subject: [PATCH 5/5] rename

---
 src/components/Search/FilterDropdowns/DropdownButton.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/Search/FilterDropdowns/DropdownButton.tsx b/src/components/Search/FilterDropdowns/DropdownButton.tsx
index 053368ec939f..1b584bf742f7 100644
--- a/src/components/Search/FilterDropdowns/DropdownButton.tsx
+++ b/src/components/Search/FilterDropdowns/DropdownButton.tsx
@@ -151,7 +151,7 @@ function DropdownButton({
         return PopoverComponent({closeOverlay: toggleOverlay, isExpanded: isOverlayVisible, setPopoverWidth: setCustomPopoverWidth});
     }, [PopoverComponent, toggleOverlay, isOverlayVisible]);
 
-    const showCloseButton = !!onClosePress;
+    const shouldShowCloseButton = !!onClosePress;
 
     return (
         <View
@@ -168,10 +168,10 @@ function DropdownButton({
                 <View style={[styles.flexRow]}>
                     <Button
                         ref={triggerRef}
-                        innerStyles={[isOverlayVisible && styles.buttonHoveredBG, {maxWidth: 256}, innerStyles, showCloseButton && styles.pr2]}
+                        innerStyles={[isOverlayVisible && styles.buttonHoveredBG, {maxWidth: 256}, innerStyles, shouldShowCloseButton && styles.pr2]}
                         onPress={calculatePopoverPositionAndToggleOverlay}
                         sentryLabel={sentryLabel}
-                        shouldRemoveRightBorderRadius={showCloseButton}
+                        shouldRemoveRightBorderRadius={shouldShowCloseButton}
                         // eslint-disable-next-line react/jsx-props-no-spreading
                         {...(medium ? {medium: true} : {small: true})}
                     >
@@ -189,7 +189,7 @@ function DropdownButton({
                             </Text>
                         </CaretWrapper>
                     </Button>
-                    {showCloseButton && (
+                    {shouldShowCloseButton && (
                         <>
                             <View style={[styles.buttonDivider]} />
                             <Button