Skip to content

reset scroll position for readOnly inputs with long values #7427

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 2 commits into from
Nov 15, 2024
Merged

reset scroll position for readOnly inputs with long values #7427

merged 2 commits into from
Nov 15, 2024

Conversation

NOMADE55
Copy link
Contributor

@NOMADE55 NOMADE55 commented Nov 12, 2024 •
edited
Loading

What does this PR do?

When using the Select Component, the readonly input used to show the value is scrolled when this value is too long.
This PR leverages the input's scroll attribute to understand if the readonly input is being show properly.
Whenever scrollLeft is more than zero, we reset it back to beginning.

Where should the reviewer start?

What testing has been done on this PR?

  • Tried the fix in a test project.

How should this be manually tested?

  • Create a test case with a Select which value once displayed, is longer than the available space.

What are the relevant issues?

Do the grommet docs need to be updated?

  • No

@NOMADE55
imp: reset scroll position for readOnly inputs with long values
cd4e41c 
Signed-off-by: Lucas Terracino <lukas.nomade@gmail.com>
@NOMADE55 NOMADE55 force-pushed the fix/scroll-input-with-long-value branch from 07f5fef to cd4e41c Compare November 12, 2024 05:23
jcfilben
jcfilben approved these changes Nov 15, 2024
View reviewed changes
Copy link
Collaborator

@jcfilben jcfilben left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good!

@jcfilben jcfilben requested a review from MikeKingdom November 15, 2024 03:38
MikeKingdom
MikeKingdom approved these changes Nov 15, 2024
View reviewed changes
Copy link
Collaborator

@MikeKingdom MikeKingdom left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good. Tested with the original problem situation as well as typical readonly TextInputs.

I was a little worried it would prevent manual scrolling of long values but it did fine.

@jcfilben jcfilben merged commit bee2393 into grommet:master Nov 15, 2024
13 of 14 checks passed
@NOMADE55
Copy link
Contributor Author

Looks good. Tested with the original problem situation as well as typical readonly TextInputs.

I was a little worried it would prevent manual scrolling of long values but it did fine.

Great!
The only quirk is that it works on blur.
It's a good compromise. If the user is not focusing on the input anymore, resets its scroll.

@NOMADE55 NOMADE55 deleted the fix/scroll-input-with-long-value branch November 15, 2024 22:17
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@MikeKingdom MikeKingdom MikeKingdom approved these changes

@jcfilben jcfilben jcfilben approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Long option text sometimes gets rendered right-justified in Select
3 participants
@NOMADE55 @MikeKingdom @jcfilben