add scroll padding to multiline and labeled text input #8137
Conversation
MelvinBot
requested review from
Julesssss and
parasharrajat
and removed request for
a team
|
Sorry, I forgot to ask about it in the proposal. Does this issue not affect native platforms? I checked and Native platforms also have this issue. You can to scroll manually to see the top line. Does this solution works on native? |
|
@parasharrajat I think is very rare someone using keyboard external and use the arrow key to reproduce the issue. Only my opinion😅 |
Yeah! you are correct. I meant to ask will it be a problem with the native platform? |
|
@parasharrajat I put the style to |
Co-authored-by: Rajat Parashar <parasharrajat@users.noreply.github.com>
Co-authored-by: Rajat Parashar <parasharrajat@users.noreply.github.com>
|
@parasharrajat what firefox version do you use? |
|
I tested with Firefox 98.0.1 it seems to work. Screen.Recording.2022-03-16.at.19.13.15.mov |
|
I don't know why it is not working on my FF. Technically, It should. FF developer 96.0b10 (64-bit |
|
@parasharrajat Please try again, I added overflow. I also tried in Firefox Developer Edition 99.0b4 (64-bit) is working. |
|
I am still not able to 😞 . Asked for help https://expensify.slack.com/archives/C01GTK53T8Q/p1647450300876539. @Julesssss Could you please try this on Firefox? |
|
No takers on slack 😅 |
|
Yeah, I just pinged on the thread. There must be something that we are missing if this is working for you. What do you suggest? I will try incognito. |
|
Also try to take a screenshot from inspect element, maybe we have a clue from there. |
|
I just try on FF developer 96.0b10 (64-bit) it's also working 🤔 Screen.Recording.2022-03-18.at.11.02.52.mov |
src/styles/styles.js
Outdated
| @@ -698,6 +698,11 @@ const styles = { | |||
| borderRadius: variables.componentBorderRadiusNormal, | |||
| }, | |||
|
|
|||
| textInputMultiline: { | |||
| scrollPadding: '23px 0 0 0', | |||
| overflowY: 'auto', | |||
There was a problem hiding this comment.
Actually it’s not, there’s a warning from FF because not detect a scroll of the input and probably the offset scroll not detected.
It’s just some attempt to make it work on your end before.
It’s safe to remove the overflow.
| @@ -698,6 +698,11 @@ const styles = { | |||
| borderRadius: variables.componentBorderRadiusNormal, | |||
| }, | |||
|
|
|||
| textInputMultiline: { | |||
| scrollPadding: '23px 0 0 0', | |||
There was a problem hiding this comment.
scrollPadding: '23px 0 0 0 0',
I think we only need top padding. Right?
There was a problem hiding this comment.
Sorry ignore this, I am on drugs... Lol.
There was a problem hiding this comment.
LGTM,
cc: @Julesssss
PR Reviewer Checklist
- I verified the PR has a small number of commits behind
main - I verified the correct issue is linked in the
### Fixed Issuessection above - I verified testing steps are clear and they cover the changes made in this PR
- I verified the testing environment is mentioned in the test steps
- I verified testing steps cover success & fail scenarios (if applicable)
- I checked that screenshots or videos are included for tests on all platforms
- I verified tests pass on all platforms & I tested again on:
- iOS / native
- Android / native
- iOS / Safari
- Android / Chrome
- MacOS / Chrome
- MacOS / Desktop
- I verified there are no console errors related to changes in this PR
- I verified proper code patterns were followed (see Reviewing the code)
- I verified comments were added when the code was not self explanatory
- I verified any copy / text shown in the product was added in all
src/languages/*files (if applicable) - I verified proper naming convention for platform-specific files was followed (if applicable)
- I verified style guidelines were followed
- I verified the JSDocs style guidelines (in
STYLE.md) were followed
- I verified that this PR follows the guidelines as stated in the Review Guidelines
- I verified other components are not impacted by changes in this PR (i.e. if the PR modifies a shared library or component like
Avatar, I verified the components usingAvatarare working as expected) - I verified the UI performance was not affected (the performance is the same than
mainbranch) - If a new component is created I verified that a similar component doesn't exist in the codebase
🎀 👀 🎀 C+ reviewed
This comment was marked as duplicate.
This comment was marked as duplicate.
|
I meant on the PR description 🙂 |
|
Ahh sorry 😅 |
|
✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release. |
|
🚀 Deployed to staging by @Julesssss in version: 1.1.47-0 🚀
|
|
🚀 Deployed to production by @roryabraham in version: 1.1.49-1 🚀
|
Details
Adding
scroll-paddingwill give offset scroll to text input and the value will not be hidden by the label.Fixed Issues
$ #7729
Tests
PR Review Checklist
Contributor (PR Author) Checklist
main### Fixed Issuessection abovesrc/languages/*files (if applicable)Styling.md) for all style edits I madeSTYLE.md)Avatar, I verified the components usingAvatarare working as expected)mainbranch)PR Reviewer Checklist
main### Fixed Issuessection abovesrc/languages/*files (if applicable)STYLE.md) were followedAvatar, I verified the components usingAvatarare working as expected)mainbranch)QA Steps
Screenshots
Web
Screen.Recording.2022-03-24.at.01.45.54.mov
mWeb
Screen.Recording.2022-03-24.at.01.46.51.mov
Desktop
Screen.Recording.2022-03-24.at.01.47.38.mov
iOS
Screen.Recording.2022-03-24.at.01.50.36.mov
Android
Screen.Recording.2022-03-24.at.01.51.35.mov