SearchBar onCancel not firing

Explain what you did

Added a SearchBar component to my Expo app.

Expected behavior

Based on the documentation, I expected my callback to be fired when pressing the Cancel button that appears alongside the search when there’s text in the input.

Describe the bug

The function passed to onCancel doesn’t fire. Instead, tapping the Cancel button just appears to blur the input. This forces the keyboard to close and focus to be lost, leaving any text in the input.

I get that I can pass showCancel to the component and that this will always show the Cancel button (which can then be pressed to fire the callback) but this kind of defeats the object of having it there in the first place and doesn’t work in the same way a native iOS search bar works (try searching in Settings – you can tap cancel for it to clear and close whereas the small clear button in the input just clears but keeps focus). If it has to stay like this with your component, it’d be great if you could adjust the section on onCancel as right now it doesn’t mention a potential requirement of showCancel being true.

Basically, I would’ve liked to be able to press Cancel and have my callback clear the input and blur focus in one go as opposed to having to tap the input once to blur (and hide Cancel) to only then be able to tap the clear icon.

To Reproduce

const handleCancelSearch = () => {
  // Do something...
}

<SearchBar
  platform="ios"
  placeholder={"..."}
  onChangeText={handleSearch}
  onCancel={handleCancelSearch}
  lightTheme={true}
  value={searchQuery}
/>

Your Environment (please complete the following information):

software	version
react-native-elements	^1.2.7
react-native	Expo SDK 35.0.0

Thank you for all the hard work you and the team put into React Native Elements! It’s awesome.

[oxyii]

@darrylyoung Reproduced. This is not a SearchBar issue exactly. It’s ScrollView and ScrollView-based components (such a FlatList) behavior.

<ScrollView keyboardShouldPersistTaps="handled"> {/* or "always" */}
  <SearchBar ... />
</ScrollView>

You cannot tap Cancel button without keyboardShouldPersistTaps because SearchBar (TextInput) onBlur func make Cancel button hidden early

[darrylyoung]

Got it. Thank for you the explanation! I’m new to React Native so learning this as I go. Have a nice weekend.