Skip to content

Commit

Permalink
nested text onPress not working on last character (#30928)
Browse files Browse the repository at this point in the history
Summary:
This issue fixes #22747 nested text does not allow you to press on the last character.

The method reactTagForTouch filters touches based on coordinates x and y. Nested Texts are converted into Spans on Android
https://github.com/facebook/react-native/blob/28fb41a0ab48cc01d606b64744c84e2ac3805f3f/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactBaseTextShadowNode.java#L111-L112
https://developer.android.com/guide/topics/text/spans

reactTagForTouch iterates over the span and triggers the onPress handler if the x,y coordinates correspond to one of the span characters.

## Changelog

<!-- Help reviewers and the release process by writing your own changelog entry. For an example, see:
https://github.com/facebook/react-native/wiki/Changelog
-->

[Android] [Fixed] - Nested Text Android onPress does not work with last character

Pull Request resolved: #30928

Test Plan:
This changes fix the Java API which can not be tested as explained in commit 709a441
The java TextTest was excluded from the test suite in commit 709a441 as they need the Yoga libraries to run

**<details><summary>TEST - Clicking on the last letter triggers the callback</summary>**
<p>

Clicking on the last letter does not invoke the onPress callback (in this case a console.warn)

| **BEFORE** |
|:-------------------------:|
| <img src="https://user-images.githubusercontent.com/24992535/107537789-9060f480-6bc3-11eb-8ad1-1152e466f830.gif" width="700" height="" /> |

Clicking on the last letter does invoke the onPress callback (in this case a console.warn)

| **AFTER** |
|:-------------------------:|
| <img src="https://user-images.githubusercontent.com/24992535/107538263-11b88700-6bc4-11eb-9a48-139e053aa68b.gif" width="700" height="" /> |

</details>
</p>

**<details><summary>TEST - Adding and removing Text</summary>**
<p>

<video src="https://user-images.githubusercontent.com/24992535/107541305-48dc6780-6bc7-11eb-8d57-a8aeb57a6879.mp4" />

</details>
</p>

**<details><summary>TEST - Different type of languages</summary>**
<p>

<video src="https://user-images.githubusercontent.com/24992535/107541683-affa1c00-6bc7-11eb-8630-22c2ba4d0973.mp4" />

</details>
</p>

**<details><summary>TEST - Testing other Examples that use onPress handler</summary>**
<p>

<video src="https://user-images.githubusercontent.com/24992535/107541972-f9e30200-6bc7-11eb-9759-6ff9d52bba15.mp4" />

</details>
</p>

**<details><summary>TEST - Text with Inline Images</summary>**
<p>

| Inline View | Inline Image is clipped |
|:-------------------------:|:-------------------------:|
| <img src="https://user-images.githubusercontent.com/24992535/107542187-357dcc00-6bc8-11eb-9eed-eefbd8be339f.png" width="300" height="" /> | <img src="https://user-images.githubusercontent.com/24992535/107542193-37478f80-6bc8-11eb-8ab3-fa1282dc3fd3.png" width="300" height="" /> |

</details>
</p>

Reviewed By: yungsters

Differential Revision: D31061832

Pulled By: charlesbdudley

fbshipit-source-id: 3034b4f35d4042bfcf1e899a59d5b2f73a990f31
  • Loading branch information
fabOnReact authored and facebook-github-bot committed Sep 28, 2021
1 parent 6b86c83 commit 132d1d0
Showing 1 changed file with 1 addition and 1 deletion.
Original file line number Diff line number Diff line change
Expand Up @@ -371,7 +371,7 @@ public int reactTagForTouch(float touchX, float touchY) {
for (int i = 0; i < spans.length; i++) {
int spanStart = spannedText.getSpanStart(spans[i]);
int spanEnd = spannedText.getSpanEnd(spans[i]);
if (spanEnd > index && (spanEnd - spanStart) <= targetSpanTextLength) {
if (spanEnd >= index && (spanEnd - spanStart) <= targetSpanTextLength) {
target = spans[i].getReactTag();
targetSpanTextLength = (spanEnd - spanStart);
}
Expand Down

0 comments on commit 132d1d0

Please sign in to comment.