feat: Add onClearIconPress to SearchBar (#3679)

Author: n0tl3ss

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}
       />

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;

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);
+});