mWeb - Multiline Text's clipped part is scrolled into view by dragging selection cursor

[tienifr]

Is there an existing issue for this?

• I have searched the existing issues

Describe the issue

Text component with numberOfLines is truncated with ellipsis. However:

• On mWeb;
• numberOfLines > 1;
• Long press then drag the selection cursor vertically;

then:

• The clipped text after ellipsis is scrolled into view
• Notice that the ellipsis remains its location in the middle of the text

Sandbox: https://codesandbox.io/s/vigorous-yalow-sjf2yr
Demo: https://sjf2yr.csb.app/

Screenshots

Reproduce on mobile Chrome, please refer to Steps to reproduce section:

Screenrecording_20230923_004840.mp4

The text is truncated with ellipsis:

But we can scroll through out the clipped text:

The ellipsis remains at the initial position:

Expected behavior

The Text if truncated should completely be hidden/clipped and not be selected by any means of scroll.

Steps to reproduce

Reproduced on mobile Chrome.

1. Create a long Text with numberOfLines > 1
2. On mWeb, long press the text to toggle text selection cursor
3. Drag the selection cursor vertically
4. Observe that the clipped text is scrolled into view

Test case

https://codesandbox.io/s/vigorous-yalow-sjf2yr

Additional comments

My proposed solution:

What is the root cause of that problem?

When numberOfLines is 1, it uses automatic ellipsis with text-overflow: ellipsis When numberOfLines is larger than 1, it uses fragmenting overflow with -webkit-line-clamp and overflow: hidden.

react-native-web/packages/react-native-web/src/exports/Text/index.js

Lines 219 to 225 in a3ea2a0

	textMultiLine: {
	display: '-webkit-box',
	maxWidth: '100%',
	overflow: 'hidden',
	textOverflow: 'ellipsis',
	WebkitBoxOrient: 'vertical'
	},

1. The problem with -webkit-line-clamp is that it does not actually "truncate" the text but inserts an ellipsis in the last position of the specified line (reference). That explains why the ellipsis always stays at the same position. We could easily see that the whole text was still there by using DevTools to inspect the div.

2. Although overflow: hidden prevents scrolling interface, the wrapper box is still a scroll container and it still allows programmatic scrolling. I think that the dragging cursor to select text in Chrome is somehow related to these two cases.

What changes do you think we should make in order to solve the problem?

Use overflow: clip instead of overflow: hidden in textMultiline style to "forbid scrolling entirely, through any mechanism" as mentioned in the document here.