callstack / callstack/react-native-paper
SearchBar has phantom clickable invisible trailing area (right side), without anyway to disable
- Dominant language
- TypeScript
- Stars
- 14.5k
- Forks
- 2.2k
- Avg merge
- 5d 23h
- Merged PRs (30d)
- 12
Description
### Current behaviour
The SearchBar component has a clickable invisible area on the right side of the input

### Expected behaviour
The SearchBar should not have any clickable areas that are invisible on the right side of the input. Ideally, it should look something like this when the search bar is empty

### How to reproduce?
It looks like the issue is isolated to the component itself. This is what the component might look like:
```
setSearch(prev)}
value={search}
clearIcon={undefined}
onIconPress={undefined}
onTraileringIconPress={undefined}
traileringIcon={undefined}
onClearIconPress={undefined}
onPress={undefined}
/>
```
### What have you tried so far?
As seen in above, I have tried to set all the known relevant properties to `undefined`, thinking that maybe it was a configuration issue. But the issue still seems to persist despite setting all these properties to `undefined`.
### Your Environment
| software | version
| --------------------- | -------
| react-native | 0.74.5
| react-native-paper | 5.12.5
| expo sdk | 51.0.39
Contributor guide
Research direction
Start by reproducing the issue with the provided Searchbar example and locate the SearchBar component implementation and its related tests. Trace how the trailing area is rendered when traileringIcon, onTraileringIconPress, clearIcon, and the other handlers are undefined; done means the empty bar has no invisible clickable area on its right side.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react-native, typescript
- Domain
- frontend, mobile
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 52/100