Searchbar clear press does not trigger onChangeText
See original GitHub issueCurrent behaviour
Create a Searchbar component with an onChangeText
prop. Enter text. Use clear button to clear the text. onChangeText
not called with empty value - so no way to know it occured.
Expected behaviour
This should trigger onChangeText
with an empty string ''
. Alternatively, provide onClearText
and we’ll do it ourselves.
Code sample
<Searchbar
style={styles.searchBar}
placeholder="Search"
value={query}
onChangeText={(q) => setQuery(q)} />
Screenshots (if applicable)
What have you tried
Your Environment
software | version |
---|---|
ios or android | |
react-native | 0.63 |
react-native-paper | 4.4.1 |
node | 12.20.0 |
npm or yarn | yarn v1.12.3 |
expo sdk | n/a |
I am aware I am on an outdated version of this library. Will be updating later but currently in the middle of a workaround:
<Searchbar
style={styles.searchBar}
placeholder="Search"
value={query}
onChangeText={(q) => setQuery(q)}
clearIcon={(props) => (
<Icon name="close" onPress={handleSearchClear} {...props} />
)}
/>
Issue Analytics
- State:
- Created 2 years ago
- Reactions:2
- Comments:5
Top Results From Across the Web
Run onChangeText doesnt update correctly TextInput value
To achieve this I'm using useState to track when the text input value is empty or not. I'm executing onStateChange('') to clean the...
Read more >SearchBar | React Native Elements
SearchBars are used to search or filter items. Use a SearchBar when the number.
Read more >How to add SearchBar in React Native ? - GeeksforGeeks
In this article we'll add search functionality in React-Native. This can be regarded as a continuation to React native flatlist component/.
Read more >TextInput - React Native
TextInput. A foundational component for inputting text into the app via a keyboard. Props provide configurability for several features, ...
Read more >Searchbar · React Native Paper
Searchbar is a simple input box where users can type search queries. ... return ( <Searchbar placeholder="Search" onChangeText={onChangeSearch} ...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Hello 👋, this issue has been open for more than 2 months with no activity on it. If the issue is still present in the latest version, please leave a comment within 7 days to keep it open, otherwise it will be closed automatically. If you found a solution on workaround for the issue, please comment here for others to find. If this issue is critical for you, please consider sending a pull request to fix the issue.
For anyone still struggling with this issue,
make sure you use the Searchbar prop: onChangeText. Do not use onChange.
onChangeText does indeed get called with an empty string when the clear button is pressed.