From 91255456e3415b16d3b13a9fef3c116e8b28e397 Mon Sep 17 00:00:00 2001
From: Nemanja Mikic <n0t_l3ss@outlook.com>
Date: Mon, 6 Mar 2023 12:33:50 +0100
Subject: [PATCH] feat: Add onClearIconPress to SearchBar (#3679)

---
 example/src/Examples/SearchbarExample.tsx   |  6 +++++-
 src/components/Searchbar.tsx                |  9 ++++++++-
 src/components/__tests__/Searchbar.test.tsx | 17 ++++++++++++++++-
 3 files changed, 29 insertions(+), 3 deletions(-)

diff --git a/example/src/Examples/SearchbarExample.tsx b/example/src/Examples/SearchbarExample.tsx
index 2b15aac913..1c853df271 100644
--- a/example/src/Examples/SearchbarExample.tsx
+++ b/example/src/Examples/SearchbarExample.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { StyleSheet } from 'react-native';
+import { Keyboard, StyleSheet } from 'react-native';
 
 import type { StackNavigationProp } from '@react-navigation/stack';
 import { Caption, Searchbar, Text } from 'react-native-paper';
@@ -45,6 +45,10 @@ const SearchExample = ({ navigation }: Props) => {
         onChangeText={(query: string) => setThirdQuery(query)}
         value={thirdQuery}
         onIconPress={/* In real code, this will open the drawer */ () => {}}
+        onClearIconPress={
+          /* delete query text (default behavior) and dismiss keyboard */ () =>
+            Keyboard.dismiss()
+        }
         icon="menu"
         style={styles.searchbar}
       />
diff --git a/src/components/Searchbar.tsx b/src/components/Searchbar.tsx
index 4eb04b2fc3..727a931042 100644
--- a/src/components/Searchbar.tsx
+++ b/src/components/Searchbar.tsx
@@ -53,6 +53,11 @@ export type Props = React.ComponentPropsWithRef<typeof TextInput> & {
    * Callback to execute if we want the left icon to act as button.
    */
   onIconPress?: (e: GestureResponderEvent) => void;
+
+  /**
+   * Callback to execute if we want to add custom behaviour to close icon button.
+   */
+  onClearIconPress?: (e: GestureResponderEvent) => void;
   /**
    * @supported Available in v5.x with theme version 3
    * Changes Searchbar shadow and background on iOS and Android.
@@ -129,6 +134,7 @@ const Searchbar = forwardRef<TextInputHandles, Props>(
       iconColor: customIconColor,
       inputStyle,
       onIconPress,
+      onClearIconPress,
       placeholder,
       searchAccessibilityLabel = 'search',
       elevation = 1,
@@ -170,9 +176,10 @@ const Searchbar = forwardRef<TextInputHandles, Props>(
       };
     });
 
-    const handleClearPress = () => {
+    const handleClearPress = (e: any) => {
       root.current?.clear();
       rest.onChangeText?.('');
+      onClearIconPress?.(e);
     };
 
     const { colors, roundness, dark, isV3 } = theme;
diff --git a/src/components/__tests__/Searchbar.test.tsx b/src/components/__tests__/Searchbar.test.tsx
index 772fdb1772..babec36f92 100644
--- a/src/components/__tests__/Searchbar.test.tsx
+++ b/src/components/__tests__/Searchbar.test.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Animated } from 'react-native';
 
-import { render } from '@testing-library/react-native';
+import { fireEvent, render } from '@testing-library/react-native';
 import renderer from 'react-test-renderer';
 
 import Searchbar from '../Searchbar';
@@ -93,3 +93,18 @@ it('animated value changes correctly', () => {
     transform: [{ scale: 1.5 }],
   });
 });
+
+it('defines onClearIconPress action and checks if it is called when close button is pressed', () => {
+  const onClearIconPressMock = jest.fn();
+  const { getByTestId } = render(
+    <Searchbar
+      testID="search-bar"
+      value="value"
+      onClearIconPress={onClearIconPressMock}
+    />
+  );
+  const iconComponent = getByTestId('search-bar-icon-wrapper').props.children;
+
+  fireEvent(iconComponent, 'onPress');
+  expect(onClearIconPressMock).toHaveBeenCalledTimes(1);
+});