Ellipse text (...) in the text field component is scrollable using touch pad

[vivinkrishna-ni]

🐛 Bug Report

The nimble-text-field component shows ellipse text if the text is too long. However, when hovering the text and tried to scroll using the touch pad, the part of the text is also moving along with that and shows an empty space.

💻 Repro or Code Sample

1. In the storybook, go to nimble-text-field component.
2. Enter a long text and blur out from the control. An ellipse text is shown at the end of the text.
3. Hover over the text (Do not click or focus the control)
4. Scroll towards right and left.

🤔 Expected Behavior

We would prefer the text should not be scrollable.

😯 Current Behavior

The text is scrollable creating an empty space.

scroll-text-field-issue.mp4

💁 Possible Solution

🔦 Context

In SLE, for all readonly fields used in the details panel is scrollable using the touch pad when the text is too long. However, we consider this as a low severity issue because the user intentionally scrolls the text ellipsized. We are creating this issue to get thoughts on fixing it.

🌍 Your Environment

• OS & Device: Windows on PC
• Browser Google Chrome
• Version 131.0.6778.266

[jattasNI]

This seems to be browser specific. For example, it works correctly on macOS Firefox.

scroll-firefox-mac.mov

@fredvisser will take a closer look but our current leaning is not to prioritize fixing this. If you're interested in contributing a fix then some possible next steps could be figuring out which browsers it reproduces in, creating smaller reproducible pages, and filing bugs to those browser vendors.