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 & { * 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( iconColor: customIconColor, inputStyle, onIconPress, + onClearIconPress, placeholder, searchAccessibilityLabel = 'search', elevation = 1, @@ -170,9 +176,10 @@ const Searchbar = forwardRef( }; }); - 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( + + ); + const iconComponent = getByTestId('search-bar-icon-wrapper').props.children; + + fireEvent(iconComponent, 'onPress'); + expect(onClearIconPressMock).toHaveBeenCalledTimes(1); +});