CSS lineClamp disables text selection on Android
Nobody has claimed this yet.
Assessment
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Newbie friendliness
- 42/100
- Issue type
- Bug
- Clarity
- Mostly clear
- Activity status
- Stale
- Tech stack
- javascript, react-native
- Domain
- mobile
Research direction
Reproduce the behavior with the linked Snack on Android using React Native 0.75 or below, then locate the CSS lineClamp handling and its Android Text mapping in this repository. Confirm that selectable text both truncates with an ellipsis and remains selectable; the issue provides no file or test path, so the relevant implementation and regression test still need to be identified.
Written by the indexing model from the issue text.
Description
Describe the issue
Root cause is a bug in React Native for Android (iOS works correctly). When userSelect:'auto' or selectable={true} is used in combination with numberOfLines on a React Native Text, Android clips overflow text rather than using the default ellipsizeMode:'tail'.
The workaround to restore the text overflow ellipsis is to set userSelect:'none' on the text for Android, which comes at the cost of text no longer being selectable.
Expected behavior
Text should be truncated with an ellipsis and remain user-selectable.
Steps to reproduce
React Native 0.75 or below. Android.
<html.span>- style of
lineClamp - text is no longer selectable
Test case
https://snack.expo.dev/rIIwaSlqQ6cHKlcO2Vatn?platform=android
Additional comments
Android hack to fix this https://stackoverflow.com/questions/14691511/textview-using-spannable-ellipsize-doesnt-work/40505388#40505388
- Dominant language
- JavaScript
- Stars
- 3.6k
- Forks
- 206
- PR merge metrics
- No merged PRs in 30d
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
More from react/react-strict-dom
-
bug
Difficulty 2/5 1-3 hours Newbie friendliness 65/100
react/react-strict-dom#467 · 1 comment ·
-
Difficulty 2/5 1-3 hours Newbie friendliness 68/100
react/react-strict-dom#465 · 2 comments ·
-
Difficulty 5/5 Over a week Newbie friendliness 35/100
react/react-strict-dom#520 ·
-
bug
Difficulty 2/5 1-3 hours Newbie friendliness 35/100
react/react-strict-dom#505 · 2 reactions ·
-
bug
Difficulty 3/5 1-2 days Newbie friendliness 62/100
react/react-strict-dom#491 · 4 comments ·
All issues in react/react-strict-dom
Similar issues
-
awaiting triage bug Causes friction Hop Gui P1 P2 Transforms
Difficulty 2/5 1-3 hours Newbie friendliness 75/100
-
Difficulty 2/5 1-3 hours Newbie friendliness 75/100
-
Difficulty 2/5 1-3 hours Newbie friendliness 75/100
-
Difficulty 2/5 1-3 hours Newbie friendliness 70/100
georgestephanis/p2026#40 ·
-
Enatega Customer and Rider app: Add-ons price is not visible to customer after order is placed. Open
Difficulty 2/5 1-3 hours Newbie friendliness 75/100
Margaret-Petersen/food-delivery-app-clone-react-native#1981 ·