callstack / callstack/react-native-paper

SearchBar has phantom clickable invisible trailing area (right side), without anyway to disable

Open
#4,757 2 comments 0 reactions 0 assignees View on GitHub
bug
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

![Image](https://github.com/user-attachments/assets/938bc8bd-77e5-4c90-8e3f-365d30bd0bea)

### 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

![Image](https://github.com/user-attachments/assets/242a049d-f23d-4972-a90b-cf413b1fa1e1)

### 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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.