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

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.