fix long text cut in iOS single line input #14273

0xmiros · 2023-01-13T09:52:03Z

Details

remove textAlign="left"
remove lineHeight when single line

Fixed Issues

$ #13802 (comment)
PROPOSAL: #13802

Tests

Login with any account.
Choose any single line TextInput, i.e. Settings -> Workspaces -> workspace -> General settings and focus on Name input.
Enter long text with multiple words, i.e. Miroslav.stevanovic12345's Workspacelongnametest test.
Blur text input by clicking Default currency picker or clicking Save button.
Verify that Name text is cut at the end position of input field. On iOS, ... should be added at the end.

Verify that no errors appear in the JS console

Offline tests

Login with any account.
Disable network
Choose any single line TextInput, i.e. Settings -> Workspaces -> workspace -> General settings and focus on Name input.
Enter long text with multiple words, i.e. Miroslav.stevanovic12345's Workspacelongnametest test.
Blur text input by clicking Default currency picker.
Verify that Name text is cut at the end position of input field. On iOS, ... should be added at the end.

QA Steps

Login with any account.
Choose any single line TextInput, i.e. Settings -> Workspaces -> workspace -> General settings and focus on Name input.
Enter long text with multiple words, i.e. Miroslav.stevanovic12345's Workspacelongnametest test.
Blur text input by clicking Default currency picker.
Verify that Name text is cut at the end position of input field. On iOS, ... should be added at the end.

Verify that no errors appear in the JS console

PR Author Checklist

Screenshots/Videos

Web

web.mov

Mobile Web - Chrome

mchrome.mp4

Mobile Web - Safari

msafari.mp4

Desktop

desktop.mov

iOS

ios.mp4

While testing on iOS, I noticed that Save button blinks when open & close picker while showing keyboard. This is not related to this issue and can be handled in a separate issue.

Android

android.mp4

melvin-bot · 2023-01-13T09:52:10Z

Hey! I see that you made changes to our Form component. Make sure to update the docs in FORMS.md accordingly. Cheers!

melvin-bot · 2023-01-13T09:52:11Z

@yuwenmemon @mollfpr One of you needs to copy/paste the Reviewer Checklist from here into a new comment on this PR and complete it. If you have the K2 extension, you can simply click: [this button]

mollfpr · 2023-01-13T10:38:14Z

Reviewer Checklist

I have verified the author checklist is complete (all boxes are checked off).
I verified the correct issue is linked in the ### Fixed Issues section above
I verified testing steps are clear and they cover the changes made in this PR
- I verified the steps for local testing are in the Tests section
- I verified the steps for Staging and/or Production testing are in the QA steps section
- I verified the steps cover any possible failure scenarios (i.e. verify an input displays the correct error message if the entered data is not correct)
- I turned off my network connection and tested it while offline to ensure it matches the expected behavior (i.e. verify the default avatar icon is displayed if app is offline)
I checked that screenshots or videos are included for tests on all platforms
I included screenshots or videos for tests on all platforms
I verified tests pass on all platforms & I tested again on:
- Android / native
- Android / Chrome
- iOS / native
- iOS / Safari
- MacOS / Chrome / Safari
- MacOS / Desktop
If there are any errors in the console that are unrelated to this PR, I either fixed them (preferred) or linked to where I reported them in Slack
I verified proper code patterns were followed (see Reviewing the code)
- I verified that any callback methods that were added or modified are named for what the method does and never what callback they handle (i.e. toggleReport and not onIconClick).
- I verified that comments were added to code that is not self explanatory
- I verified that any new or modified comments were clear, correct English, and explained "why" the code was doing something instead of only explaining "what" the code was doing.
- I verified any copy / text shown in the product is localized by adding it to src/languages/* files and using the translation method
- I verified all numbers, amounts, dates and phone numbers shown in the product are using the localization methods
- I verified any copy / text that was added to the app is correct English and approved by marketing by adding the Waiting for Copy label for a copy review on the original GH to get the correct copy.
- I verified proper file naming conventions were followed for any new files or renamed files. All non-platform specific files are named after what they export and are not named "index.js". All platform-specific files are named for the platform the code supports as outlined in the README.
- I verified the JSDocs style guidelines (in STYLE.md) were followed
If a new code pattern is added I verified it was agreed to be used by multiple Expensify engineers
I verified that this PR follows the guidelines as stated in the Review Guidelines
I verified other components that can be impacted by these changes have been tested, and I retested again (i.e. if the PR modifies a shared library or component like Avatar, I verified the components using Avatar have been tested & I retested again)
I verified all code is DRY (the PR doesn't include any logic written more than once, with the exception of tests)
I verified any variables that can be defined as constants (ie. in CONST.js or at the top of the file that uses the constant) are defined as such
If a new component is created I verified that:
- A similar component doesn't exist in the codebase
- All props are defined accurately and each prop has a /** comment above it */
- The file is named correctly
- The component has a clear name that is non-ambiguous and the purpose of the component can be inferred from the name alone
- The only data being stored in the state is data necessary for rendering and nothing else
- For Class Components, any internal methods passed to components event handlers are bound to this properly so there are no scoping issues (i.e. for onClick={this.submit} the method this.submit should be bound to this in the constructor)
- Any internal methods bound to this are necessary to be bound (i.e. avoid this.submit = this.submit.bind(this); if this.submit is never passed to a component event handler like onClick)
- All JSX used for rendering exists in the render method
- The component has the minimum amount of code necessary for its purpose, and it is broken down into smaller components in order to separate concerns and functions
If any new file was added I verified that:
- The file has a description of what it does and/or why is needed at the top of the file if the code is not self explanatory
If a new CSS style is added I verified that:
- A similar style doesn't already exist
- The style can't be created with an existing StyleUtils function (i.e. StyleUtils.getBackgroundAndBorderStyle(themeColors.componentBG)
If the PR modifies a generic component, I tested and verified that those changes do not break usages of that component in the rest of the App (i.e. if a shared library or component like Avatar is modified, I verified that Avatar is working as expected in all cases)
If the PR modifies a component related to any of the existing Storybook stories, I tested and verified all stories for that component are still working as expected.
If a new page is added, I verified it's using the ScrollView component to make it scrollable when more elements are added to the page.
I have checked off every checkbox in the PR reviewer checklist, including those that don't apply to this PR.

Screenshots/Videos

Web

14273.Web-Safari.mov

14273.Web-Chrome.mov

Mobile Web - Chrome

14273.mWeb-Chrome.mov

Mobile Web - Safari

14273.mWeb-Safari.mov

Desktop

14273.Desktop.mov

iOS

14273.iOS.mov

Android

14273.Android.mov

src/components/TextInput/BaseTextInput.js

Co-authored-by: Luthfi <luthfi.ufi14@gmail.com>

mollfpr · 2023-01-13T15:12:51Z

So far so good! I'm surprised that my testing on the native app with increased font size doesn't break any input. 👍

Just need to complete the recordings and test one more time against the input refactoring PR.

0xmiros · 2023-01-13T15:16:05Z

So far so good! I'm surprised that my testing on the native app with increased font size doesn't break any input. 👍

Maybe thanks to #10312

mollfpr · 2023-01-13T15:41:00Z

There's a side effect with removing the line-height but I think it looks better with line-height removed.

With line-height	Without line-height

The space between the bottom line seems to over	The space between the bottom line seems balance

cc @yuwenmemon

mollfpr

LGTM 👍

Tested too against the refactoring input PR.

All yours @yuwenmemon

yuwenmemon

One small comment (about a comment!)

yuwenmemon · 2023-01-13T19:56:27Z

src/components/TextInput/BaseTextInput.js

                                            this.props.secureTextEntry && styles.secureInput,
-                                            !this.props.multiline && {height: this.state.height},
+                                            !this.props.multiline && {height: this.state.height, lineHeight: undefined},


I think lineHeight: undefined would look a bit odd to anyone coming across it randomly - can we add a comment explaining why it's here and what it's doing?

+ // Remove `lineHeight` in single line input to fix long text cut issue on iOS

How about this?

+ // Explicitly remove `lineHeight` from single line inputs so that long text doesn't disappear once it exceeds the input space (See https://github.com/Expensify/App/issues/13802)

How about that?

yuwenmemon · 2023-01-13T21:42:46Z

Thanks!

OSBotify · 2023-01-13T21:46:23Z

✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release.

github-actions · 2023-01-13T22:14:17Z

Performance Comparison Report 📊

Significant Changes To Duration

There are no entries

Meaningless Changes To Duration

Show entries

Name	Duration
Open Search Page TTI	599.988 ms → 602.189 ms (+2.201 ms, ±0.0%)
App start TTI	664.694 ms → 665.420 ms (+0.727 ms, ±0.0%)
App start nativeLaunch	19.500 ms → 20.156 ms (+0.656 ms, +3.4%)
App start regularAppStart	0.019 ms → 0.020 ms (+0.001 ms, +3.6%)
App start runJsBundle	187.750 ms → 180.968 ms (-6.782 ms, -3.6%)

Show details

Name	Duration
Open Search Page TTI	Baseline Mean: 599.988 ms Stdev: 26.682 ms (4.4%) Runs: 549.162476000376 557.1838790001348 563.0885009998456 569.4490970000625 575.3791100000963 575.9307049997151 576.9888100000098 577.1480310000479 578.7923990003765 579.0105389999226 579.4204099997878 584.962402000092 585.4628100004047 593.5683599999174 594.1475020004436 596.8513589994982 598.0916749993339 599.535279000178 602.8236490003765 604.5925710005686 605.2802330004051 605.6399329993874 610.8660080004483 612.9070640001446 626.5190840000287 627.7776699997485 627.8916019992903 631.0152179999277 631.203857999295 636.8659260002896 641.753255000338 648.4093840001151 651.9002689998597 Current Mean: 602.189 ms Stdev: 20.293 ms (3.4%) Runs: 555.56665099971 572.5114339999855 572.5714929997921 574.5260420003906 576.2409259993583 585.4392499998212 587.6616209996864 588.2894289996475 589.7314050002024 591.7513020001352 593.209431999363 594.5782070001587 594.6521810004488 597.8450520001352 600.665853000246 601.8041190002114 603.437458999455 604.7374269999564 605.2302250005305 607.0711260000244 607.9766849996522 608.9916179999709 609.4855960002169 609.8853759998456 610.994141000323 613.2237149998546 616.4146729996428 619.7070309994742 622.937336999923 629.2646080004051 630.5222979998216 645.3709310004488 649.9427499994636
App start TTI	Baseline Mean: 664.694 ms Stdev: 33.097 ms (5.0%) Runs: 575.9331940002739 628.5869190003723 633.1478629997 633.7087319996208 634.2229939997196 636.736243000254 638.7677579997107 638.8747960003093 640.1472020000219 641.2917569996789 644.5967920003459 647.7679460002109 650.5993440002203 664.6084690000862 665.6656640004367 666.7323390003294 666.778373000212 667.15094100032 668.647312999703 669.4144529998302 672.492607999593 672.5797560000792 679.3193060001358 679.9668560000136 686.0920069999993 686.2123079998419 687.5683289999142 690.449756000191 706.6788079999387 709.3736800001934 737.621957000345 748.4672790002078 Current Mean: 665.420 ms Stdev: 29.573 ms (4.4%) Runs: 622.558807999827 629.1705790003762 630.9979699999094 631.3774210000411 632.3140420001 635.1111970003694 639.2418630002066 641.3405139995739 643.6792879998684 645.392119999975 650.4397470001131 652.3477480001748 653.9768040003255 655.5028609996662 655.5492700003088 657.8360430002213 661.3107629995793 662.1777630001307 669.0095079997554 669.8437719997019 669.8868890004233 676.3519780002534 676.8284029997885 683.2633050000295 689.2081850003451 700.5166039997712 711.3632559999824 715.1402340000495 718.7039149999619 722.9805760001764 724.6104469997808
App start nativeLaunch	Baseline Mean: 19.500 ms Stdev: 1.565 ms (8.0%) Runs: 18 18 18 18 18 18 18 18 18 19 19 19 19 19 19 19 19 19 19 19 20 20 20 21 21 21 22 23 23 23 Current Mean: 20.156 ms Stdev: 2.464 ms (12.2%) Runs: 17 17 18 18 18 18 18 18 18 18 19 19 19 19 19 19 19 20 20 20 20 21 21 22 22 22 23 23 24 24 25 27
App start regularAppStart	Baseline Mean: 0.019 ms Stdev: 0.001 ms (4.9%) Runs: 0.01737399958074093 0.017659000121057034 0.017659000121057034 0.01782199926674366 0.0179449999704957 0.01822900027036667 0.01871699932962656 0.018960999324917793 0.019042999483644962 0.019082999788224697 0.019084000028669834 0.019084000028669834 0.019164999946951866 0.01936900056898594 0.0194089999422431 0.019410000182688236 0.01945000048726797 0.0195720000192523 0.019652999937534332 0.019733999855816364 0.019734999164938927 0.019898000173270702 0.019938000477850437 0.020142000168561935 0.020263000391423702 0.02075199969112873 0.021239999681711197 Current Mean: 0.020 ms Stdev: 0.001 ms (5.2%) Runs: 0.018187999725341797 0.018269999884068966 0.018432999961078167 0.0185139998793602 0.019003000110387802 0.019082999788224697 0.019204999320209026 0.01928700041025877 0.0194089999422431 0.019449999555945396 0.019612000323832035 0.01973400078713894 0.019775000400841236 0.01985699962824583 0.019937999546527863 0.019977999851107597 0.019979000091552734 0.019979000091552734 0.019979000091552734 0.02001900039613247 0.020100999623537064 0.02018200047314167 0.02038600016385317 0.020426000468432903 0.020669999532401562 0.02128100022673607 0.021321000531315804 0.021321999840438366 0.0231929998844862
App start runJsBundle	Baseline Mean: 187.750 ms Stdev: 25.512 ms (13.6%) Runs: 156 157 160 162 162 165 166 168 168 171 173 173 174 175 176 177 185 186 186 188 194 197 198 199 204 206 210 216 221 227 253 255 Current Mean: 180.968 ms Stdev: 22.632 ms (12.5%) Runs: 158 160 160 161 161 163 163 163 164 164 166 166 169 172 173 176 176 177 180 180 182 183 187 188 192 202 202 219 222 238 243

OSBotify · 2023-01-16T21:51:18Z

🚀 Deployed to staging by @yuwenmemon in version: 1.2.55-0 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅

OSBotify · 2023-01-18T17:29:08Z

🚀 Deployed to production by @AndrewGable in version: 1.2.55-0 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅

parasharrajat · 2023-01-29T08:05:16Z

src/components/TextInput/BaseTextInput.js

+
+                                            // Explicitly remove `lineHeight` from single line inputs so that long text doesn't disappear
+                                            // once it exceeds the input space (See https://github.com/Expensify/App/issues/13802)
+                                            !this.props.multiline && {height: this.state.height, lineHeight: undefined},


No inline styles.

sobitneupane · 2023-10-30T07:58:19Z

src/components/TextInput/BaseTextInput.js

+
+                                            // Explicitly remove `lineHeight` from single line inputs so that long text doesn't disappear
+                                            // once it exceeds the input space (See https://github.com/Expensify/App/issues/13802)
+                                            !this.props.multiline && {height: this.state.height, lineHeight: undefined},


When the lineHeight is set to 'undefined,' there is a noticeable shift in the input causing it to move by a pixel or two when emoji is added to the input.

Issue: #26735
Platform: Web/Safari

fix long text cut in iOS single line input

30dda15

0xmiros requested a review from a team as a code owner January 13, 2023 09:52

melvin-bot bot removed the request for review from a team January 13, 2023 09:52

melvin-bot bot requested review from mollfpr and yuwenmemon January 13, 2023 09:52

mollfpr suggested changes Jan 13, 2023

View reviewed changes

src/components/TextInput/BaseTextInput.js Outdated Show resolved Hide resolved

update lineHeight value to undefined

116f975

Co-authored-by: Luthfi <luthfi.ufi14@gmail.com>

mollfpr previously approved these changes Jan 13, 2023

View reviewed changes

yuwenmemon requested changes Jan 13, 2023

View reviewed changes

add comment for removing lineHeight

6090150

0xmiros dismissed mollfpr’s stale review via 6090150 January 13, 2023 21:17

yuwenmemon approved these changes Jan 13, 2023

View reviewed changes

yuwenmemon merged commit 3661b57 into Expensify:main Jan 13, 2023

OSBotify mentioned this pull request Jan 16, 2023

Deploy Checklist: New Expensify 2023-01-16 #14333

Closed

22 tasks

melvin-bot bot mentioned this pull request Jan 18, 2023

[HOLD for payment 2023-01-25] [$1000] Long text strings disappear from single-line text fields when text is too long #13802

Closed

1 task

parasharrajat reviewed Jan 29, 2023

View reviewed changes

honnamkuan mentioned this pull request Apr 21, 2023

[Home Address] displays Arabic characters from left to right #17659

Merged

56 tasks

sobitneupane reviewed Oct 30, 2023

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix long text cut in iOS single line input #14273

fix long text cut in iOS single line input #14273

0xmiros commented Jan 13, 2023 •

edited

Loading

melvin-bot bot commented Jan 13, 2023

melvin-bot bot commented Jan 13, 2023

mollfpr commented Jan 13, 2023 •

edited

Loading

mollfpr commented Jan 13, 2023 •

edited

Loading

0xmiros commented Jan 13, 2023

mollfpr commented Jan 13, 2023

mollfpr left a comment

yuwenmemon left a comment

yuwenmemon Jan 13, 2023

0xmiros Jan 13, 2023

yuwenmemon Jan 13, 2023

yuwenmemon commented Jan 13, 2023

OSBotify commented Jan 13, 2023

github-actions bot commented Jan 13, 2023

OSBotify commented Jan 16, 2023

OSBotify commented Jan 18, 2023

parasharrajat Jan 29, 2023

sobitneupane Oct 30, 2023

fix long text cut in iOS single line input #14273

fix long text cut in iOS single line input #14273

Conversation

0xmiros commented Jan 13, 2023 • edited Loading

Details

Fixed Issues

Tests

Offline tests

QA Steps

PR Author Checklist

Screenshots/Videos

melvin-bot bot commented Jan 13, 2023

melvin-bot bot commented Jan 13, 2023

mollfpr commented Jan 13, 2023 • edited Loading

Reviewer Checklist

Screenshots/Videos

mollfpr commented Jan 13, 2023 • edited Loading

0xmiros commented Jan 13, 2023

mollfpr commented Jan 13, 2023

mollfpr left a comment

Choose a reason for hiding this comment

yuwenmemon left a comment

Choose a reason for hiding this comment

yuwenmemon Jan 13, 2023

Choose a reason for hiding this comment

0xmiros Jan 13, 2023

Choose a reason for hiding this comment

yuwenmemon Jan 13, 2023

Choose a reason for hiding this comment

yuwenmemon commented Jan 13, 2023

OSBotify commented Jan 13, 2023

github-actions bot commented Jan 13, 2023

Performance Comparison Report 📊

Significant Changes To Duration

Meaningless Changes To Duration

OSBotify commented Jan 16, 2023

OSBotify commented Jan 18, 2023

parasharrajat Jan 29, 2023

Choose a reason for hiding this comment

sobitneupane Oct 30, 2023

Choose a reason for hiding this comment

0xmiros commented Jan 13, 2023 •

edited

Loading

mollfpr commented Jan 13, 2023 •

edited

Loading

mollfpr commented Jan 13, 2023 •

edited

Loading