callstack / callstack/react-native-paper

Chip Text overflows CloseIcon in ElipsizeMode

Open
#4,328 2 comments 6 reactions 1 assignee Claimed by @lukewalczak View on GitHub
bug Chip
Dominant language
TypeScript
Stars
14.5k
Forks
2.2k
Avg merge
5d 23h
Merged PRs (30d)
12

Description

### Current behaviour
I have a Chip with a text in it that can have arbitrary length. To limit the chip to the width of the screen, I set a maxWidth on the chip and set [ellipsizeMode](https://reactnative.dev/docs/text#ellipsizemode) to 'tail' to cut off the text at the end.
Unfortunately, the text overflows the CloseIcon in EllipsizeMode.
Bildschirmfoto 2024-02-27 um 14 38 34

When inspecting the different elements, you can see the CloseIcon is rendered on top of the text.
Left Icon:
Bildschirmfoto 2024-02-27 um 14 38 49

Text:
Bildschirmfoto 2024-02-27 um 14 38 58

Close Icon:
Bildschirmfoto 2024-02-27 um 14 39 06

### Expected behaviour
I would expect the text to not overflow the close icon.

### Your Environment

| software | version
| --------------------- | -------
| android | 14
| react-native | 0.7.14
| react-native-paper | 5.12.3
| node | 18.19.0
| npm or yarn | 10.2.3

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.