[HOLD for payment 2023-10-23] [HOLD for payment 2023-10-23] [HOLD for payment 2023-10-20] [HOLD for payment 2023-10-20] [HOLD for payment 2023-10-09] [$500] Request Money - On entering emoji in merchant input field the height changes #26735

kbecciv · 2023-09-04T23:53:34Z

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

Action Performed:

Open FAB Menu > Request Money > Next > Cash
Click Show more option > Merchant

Expected Result:

The input field's height should remain consistent after entering an emoji

Actual Result:

The input field's height changes

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

Version Number: 1.3.63.0
Reproducible in staging?: y
Reproducible in production?: y
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation

6b410ae2-bd8c-4370-ad9b-ad6ee2327427.MP4

Expensify/Expensify Issue URL:
Issue reported by: @aman-atg
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1693481505877419

View all open jobs on GitHub

Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~010ed71c8c76dd7c91
Upwork Job ID: 1698990819943170048
Last Price Increase: 2023-09-05
Automatic offers:

aman-atg | Reporter | 26633158

melvin-bot · 2023-09-04T23:53:39Z

Triggered auto assignment to @flaviadefaria (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

melvin-bot · 2023-09-04T23:53:41Z

Bug0 Triage Checklist (Main S/O)

This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
This bug is not a duplicate report (check E/App issues and #expensify-bugs)
- If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
This bug is reproducible using the reproduction steps in the OP. S/O
- If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
- If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
This issue is filled out as thoroughly and clearly as possible
- Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

alphaboss1104 · 2023-09-05T00:06:54Z

Proposal

Please re-state the problem that we are trying to solve in this issue.

Request Money - On entering emoji in merchant input field the height changes

What is the root cause of that problem?

The root cause of this issue is we didn't add autoGrowHeight property that automatically adjusts the height of the field to fit the content, including emojis to the Merchant TextInput component.

App/src/pages/iou/MoneyRequestMerchantPage.js

Lines 110 to 119 in 8150ce0

    
           <TextInput 
        
               inputID="moneyRequestMerchant" 
        
               name="moneyRequestMerchant" 
        
               defaultValue={iou.merchant} 
        
               maxLength={CONST.MERCHANT_NAME_MAX_LENGTH} 
        
               label={translate('common.merchant')} 
        
               accessibilityLabel={translate('common.merchant')} 
        
               accessibilityRole={CONST.ACCESSIBILITY_ROLE.TEXT} 
        
               ref={(el) => (inputRef.current = el)} 
        
           />

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

We should add autoGrowHeight props to solve this issue and also we can add some helpful props in here.

              <TextInput
                  inputID="moneyRequestMerchant"
                  name="moneyRequestMerchant"
                  defaultValue={iou.merchant}
                  maxLength={CONST.MERCHANT_NAME_MAX_LENGTH}
                  label={translate('common.merchant')}
                  accessibilityLabel={translate('common.merchant')}
                  accessibilityRole={CONST.ACCESSIBILITY_ROLE.TEXT}
                  ref={(el) => (inputRef.current = el)}
+                 autoGrowHeight
+                 containerStyles={[styles.autoGrowHeightMultilineInput]}
+                 textAlignVertical="top"
              />

What alternative solutions did you explore? (Optional)

None.

melvin-bot · 2023-09-05T09:25:54Z

Job added to Upwork: https://www.upwork.com/jobs/~010ed71c8c76dd7c91

melvin-bot · 2023-09-05T09:25:57Z

Current assignee @flaviadefaria is eligible for the External assigner, not assigning anyone new.

melvin-bot · 2023-09-05T09:26:03Z

Triggered auto assignment to Contributor-plus team member for initial proposal review - @sobitneupane (External)

ayazalavi · 2023-09-05T18:20:50Z

Proposal

Please re-state the problem that we are trying to solve in this issue.

When user select Request Money from menu item then click on show more in the last step then tap on Merchant and then enter some text and insert emoji, this results in height getting fluctuated

What is the root cause of that problem?

The root cause of the problem is the 'line-height' CSS attribute, which needs to be explicitly set for Safari. This is because, in Safari, the shadow DOM calculates the height of content manually. So, when we simply enter text, the shadow DOM calculates the height to be 17px. However, when we insert an emoji, the height is readjusted because there is room for an increase in height. After the emoji gets inserted, the height becomes 21px causing fluctation:

App/src/components/TextInput/BaseTextInput.js

Lines 328 to 333 in cbda2b0

    
           // 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) 
        
           !isMultiline && {height, lineHeight: undefined}, 
        
           // Stop scrollbar flashing when breaking lines with autoGrowHeight enabled. 
        
           props.autoGrowHeight && StyleUtils.getAutoGrowHeightInputStyle(textInputHeight, maxHeight),

has lineHeight: undefined which is causing height of the shadow content to be calculated by the browser.

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

We need to explicitly set lineheight css attribute like mentioned here. We need to change

App/src/components/TextInput/BaseTextInput.js

Line 330 in cbda2b0

!isMultiline && {height, lineHeight: undefined},

to:

!isMultiline && { height, lineHeight: Browser.isSafari() && _.find(props.inputStyle, function(f) { return f.lineHeight !== undefined; })?.lineHeight || undefined}

which will take line height when passed through props and it is not causing any fluctuation anymore in safari. check video below for confirmation:

Untitled.mp4

What alternative solutions did you explore? (Optional)

Another solution is to use the autoGrowHeight prop, but it will convert the input field into a textarea, making it multiline. after that you can enter into next line even though input height is just for one line.

ayazalavi · 2023-09-06T14:40:39Z

@sobitneupane ... TIA

ayazalavi · 2023-09-07T14:29:49Z

@sobitneupane any update regarding my proposal?

sobitneupane · 2023-09-11T09:58:56Z

@alphaboss1104 Thanks for the proposal.

autoGrowHeight is only used if for multiline input.

sobitneupane · 2023-09-11T10:11:07Z

Proposal from @ayazalavi looks good to me.

🎀 👀 🎀 C+ reviewed

melvin-bot · 2023-09-11T10:11:13Z

Triggered auto assignment to @arosiclair, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

arosiclair · 2023-09-11T16:20:50Z

@ayazalavi can you verify this doesn't cause any regressions wrt this comment:

// Explicitly remove lineHeight from single line inputs so that long text doesn't disappear
// once it exceeds the input space (See #13802)

ayazalavi · 2023-09-12T01:31:36Z

@arosiclair I double checked #13802. It is working as expected in my end but please do verify it on your end as well.

Basically the fix is safari ONLY since the bug is appearing in safari browser. For all other platforms code will be same as before.

arosiclair · 2023-09-12T14:58:11Z

Be sure to include testing for #13802 in your PR test steps.

melvin-bot · 2023-09-12T14:58:26Z

📣 @sobitneupane Please request via NewDot manual requests for the Reviewer role ($500)

melvin-bot · 2023-09-12T14:58:28Z

📣 @ayazalavi You have been assigned to this job!
Please apply to the Upwork job and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Once you apply to this job, your Upwork ID will be stored and you will be automatically hired for future jobs!
Keep in mind: Code of Conduct | Contributing 📖

melvin-bot · 2023-09-12T14:58:33Z

📣 @aman-atg 🎉 An offer has been automatically sent to your Upwork account for the Reporter role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job

melvin-bot · 2023-10-13T22:02:43Z

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.3.83-11 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

removed chrome check for fixing regression #28580

If no regressions arise, payment will be issued on 2023-10-20. 🎊

After the hold period is over and BZ checklist items are completed, please complete any of the applicable payments for this issue, and check them off once done.

External issue reporter
Contributor that fixed the issue
Contributor+ that helped on the issue and/or PR

For reference, here are some details about the assignees on this issue:

@ayazalavi requires payment
@sobitneupane does not require payment (Eligible for Manual Requests)
@aman-atg requires payment offer (Reporter)

As a reminder, here are the bonuses/penalties that should be applied for any External issue:

Merged PR within 3 business days of assignment - 50% bonus
Merged PR more than 9 business days after assignment - 50% penalty

melvin-bot · 2023-10-13T22:02:45Z

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

[@arosiclair] The PR that introduced the bug has been identified. Link to the PR:
[@arosiclair] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment:
[@arosiclair] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion:
[@ayazalavi / @sobitneupane] Determine if we should create a regression test for this bug.
[@ayazalavi / @sobitneupane] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.
[] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

melvin-bot · 2023-10-13T22:54:43Z

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.3.83-11 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

removed chrome check for fixing regression #28580

If no regressions arise, payment will be issued on 2023-10-20. 🎊

After the hold period is over and BZ checklist items are completed, please complete any of the applicable payments for this issue, and check them off once done.

External issue reporter
Contributor that fixed the issue
Contributor+ that helped on the issue and/or PR

For reference, here are some details about the assignees on this issue:

@ayazalavi requires payment
@sobitneupane does not require payment (Eligible for Manual Requests)
@aman-atg requires payment offer (Reporter)

As a reminder, here are the bonuses/penalties that should be applied for any External issue:

Merged PR within 3 business days of assignment - 50% bonus
Merged PR more than 9 business days after assignment - 50% penalty

melvin-bot · 2023-10-13T22:54:45Z

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

[@arosiclair] The PR that introduced the bug has been identified. Link to the PR:
[@arosiclair] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment:
[@arosiclair] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion:
[@ayazalavi / @sobitneupane] Determine if we should create a regression test for this bug.
[@ayazalavi / @sobitneupane] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.
[] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

melvin-bot · 2023-10-16T21:17:18Z

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.3.84-10 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

removed chrome check for fixing regression #28580

If no regressions arise, payment will be issued on 2023-10-23. 🎊

After the hold period is over and BZ checklist items are completed, please complete any of the applicable payments for this issue, and check them off once done.

External issue reporter
Contributor that fixed the issue
Contributor+ that helped on the issue and/or PR

For reference, here are some details about the assignees on this issue:

@ayazalavi requires payment
@sobitneupane does not require payment (Eligible for Manual Requests)
@aman-atg requires payment offer (Reporter)

As a reminder, here are the bonuses/penalties that should be applied for any External issue:

Merged PR within 3 business days of assignment - 50% bonus
Merged PR more than 9 business days after assignment - 50% penalty

melvin-bot · 2023-10-16T21:17:19Z

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

[@arosiclair] The PR that introduced the bug has been identified. Link to the PR:
[@arosiclair] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment:
[@arosiclair] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion:
[@ayazalavi / @sobitneupane] Determine if we should create a regression test for this bug.
[@ayazalavi / @sobitneupane] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.
[] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

melvin-bot · 2023-10-16T21:42:58Z

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.3.84-10 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

removed chrome check for fixing regression #28580

If no regressions arise, payment will be issued on 2023-10-23. 🎊

After the hold period is over and BZ checklist items are completed, please complete any of the applicable payments for this issue, and check them off once done.

External issue reporter
Contributor that fixed the issue
Contributor+ that helped on the issue and/or PR

For reference, here are some details about the assignees on this issue:

@ayazalavi requires payment
@sobitneupane does not require payment (Eligible for Manual Requests)
@aman-atg requires payment offer (Reporter)

As a reminder, here are the bonuses/penalties that should be applied for any External issue:

Merged PR within 3 business days of assignment - 50% bonus
Merged PR more than 9 business days after assignment - 50% penalty

melvin-bot · 2023-10-16T21:43:00Z

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

[@arosiclair] The PR that introduced the bug has been identified. Link to the PR:
[@arosiclair] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment:
[@arosiclair] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion:
[@ayazalavi / @sobitneupane] Determine if we should create a regression test for this bug.
[@ayazalavi / @sobitneupane] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.
[] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

flaviadefaria · 2023-10-23T08:32:44Z

Payment Summary

@ayazalavi = $500 - 50% (over 6 days) - 50% (regression) = $125
@sobitneupane = $500 - 50% (over 6 days) - 50% (regression) = $125
@aman-atg = $50 (reporter)

@aman-atg = paid
@ayazalavi = offer sent
@sobitneupane can you please fill out the comment above? Thanks!

flaviadefaria · 2023-10-23T11:26:02Z

@ayazalavi you've been paid. Closing this GH.

sobitneupane · 2023-10-30T07:59:34Z

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

The PR that introduced the bug has been identified. Link to the PR:

#14273

The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment:

https://github.com/Expensify/App/pull/14273/files#r1375797245

A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion:

Not Required

Determine if we should create a regression test for this bug.

Yes

If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.

sobitneupane · 2023-10-30T08:01:20Z

Regression Test Proposal

Open FAB Menu > Request Money > Next > Cash
Click Show more option > Merchant
Verify that the input field's height remain consistent after entering an emoji

Do we agree 👍 or 👎

sobitneupane · 2023-10-30T13:55:35Z

#26735 (comment)

Requested payment on newDot.

JmillsExpensify · 2023-11-03T22:17:02Z

$125 payment approved for @sobitneupane based on this comment.

kbecciv added Daily KSv2 Bug Something is broken. Auto assigns a BugZero manager. labels Sep 4, 2023

melvin-bot bot assigned flaviadefaria Sep 4, 2023

flaviadefaria added the External Added to denote the issue can be worked on by a contributor label Sep 5, 2023

melvin-bot bot changed the title ~~Request Money - On entering emoji in merchant input field the height changes~~ [$500] Request Money - On entering emoji in merchant input field the height changes Sep 5, 2023

melvin-bot bot added the Help Wanted Apply this label when an issue is open to proposals by contributors label Sep 5, 2023

melvin-bot bot assigned sobitneupane Sep 5, 2023

melvin-bot bot added the Overdue label Sep 7, 2023

melvin-bot bot removed the Overdue label Sep 11, 2023

melvin-bot bot assigned arosiclair Sep 11, 2023

arosiclair assigned ayazalavi Sep 12, 2023

melvin-bot bot removed the Help Wanted Apply this label when an issue is open to proposals by contributors label Sep 12, 2023

melvin-bot bot added Weekly KSv2 and removed Daily KSv2 labels Oct 13, 2023

melvin-bot bot added Weekly KSv2 and removed Weekly KSv2 labels Oct 13, 2023

flaviadefaria added Daily KSv2 and removed Weekly KSv2 labels Oct 16, 2023

melvin-bot bot added Weekly KSv2 and removed Daily KSv2 labels Oct 16, 2023

melvin-bot bot added Weekly KSv2 and removed Weekly KSv2 labels Oct 16, 2023

flaviadefaria closed this as completed Oct 23, 2023

sobitneupane mentioned this issue Oct 30, 2023

fix long text cut in iOS single line input #14273

Merged

53 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[HOLD for payment 2023-10-23] [HOLD for payment 2023-10-23] [HOLD for payment 2023-10-20] [HOLD for payment 2023-10-20] [HOLD for payment 2023-10-09] [$500] Request Money - On entering emoji in merchant input field the height changes #26735

[HOLD for payment 2023-10-23] [HOLD for payment 2023-10-23] [HOLD for payment 2023-10-20] [HOLD for payment 2023-10-20] [HOLD for payment 2023-10-09] [$500] Request Money - On entering emoji in merchant input field the height changes #26735

kbecciv commented Sep 4, 2023 •

edited by melvin-bot bot

Loading

melvin-bot bot commented Sep 4, 2023

melvin-bot bot commented Sep 4, 2023

alphaboss1104 commented Sep 5, 2023 •

edited

Loading

melvin-bot bot commented Sep 5, 2023

melvin-bot bot commented Sep 5, 2023

melvin-bot bot commented Sep 5, 2023

ayazalavi commented Sep 5, 2023 •

edited

Loading

ayazalavi commented Sep 6, 2023

ayazalavi commented Sep 7, 2023

sobitneupane commented Sep 11, 2023

sobitneupane commented Sep 11, 2023 •

edited

Loading

melvin-bot bot commented Sep 11, 2023

arosiclair commented Sep 11, 2023

ayazalavi commented Sep 12, 2023 •

edited

Loading

arosiclair commented Sep 12, 2023

melvin-bot bot commented Sep 12, 2023

melvin-bot bot commented Sep 12, 2023

melvin-bot bot commented Sep 12, 2023

melvin-bot bot commented Oct 13, 2023

melvin-bot bot commented Oct 13, 2023

melvin-bot bot commented Oct 13, 2023

melvin-bot bot commented Oct 13, 2023

melvin-bot bot commented Oct 16, 2023

melvin-bot bot commented Oct 16, 2023

melvin-bot bot commented Oct 16, 2023

melvin-bot bot commented Oct 16, 2023

flaviadefaria commented Oct 23, 2023

flaviadefaria commented Oct 23, 2023

sobitneupane commented Oct 30, 2023

sobitneupane commented Oct 30, 2023

sobitneupane commented Oct 30, 2023

JmillsExpensify commented Nov 3, 2023

[HOLD for payment 2023-10-23] [HOLD for payment 2023-10-23] [HOLD for payment 2023-10-20] [HOLD for payment 2023-10-20] [HOLD for payment 2023-10-09] [$500] Request Money - On entering emoji in merchant input field the height changes #26735

[HOLD for payment 2023-10-23] [HOLD for payment 2023-10-23] [HOLD for payment 2023-10-20] [HOLD for payment 2023-10-20] [HOLD for payment 2023-10-09] [$500] Request Money - On entering emoji in merchant input field the height changes #26735

Comments

kbecciv commented Sep 4, 2023 • edited by melvin-bot bot Loading

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

melvin-bot bot commented Sep 4, 2023

melvin-bot bot commented Sep 4, 2023

Bug0 Triage Checklist (Main S/O)

alphaboss1104 commented Sep 5, 2023 • edited Loading

Proposal

Please re-state the problem that we are trying to solve in this issue.

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

melvin-bot bot commented Sep 5, 2023

melvin-bot bot commented Sep 5, 2023

melvin-bot bot commented Sep 5, 2023

ayazalavi commented Sep 5, 2023 • edited Loading

Proposal

Please re-state the problem that we are trying to solve in this issue.

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

ayazalavi commented Sep 6, 2023

ayazalavi commented Sep 7, 2023

sobitneupane commented Sep 11, 2023

sobitneupane commented Sep 11, 2023 • edited Loading

melvin-bot bot commented Sep 11, 2023

arosiclair commented Sep 11, 2023

ayazalavi commented Sep 12, 2023 • edited Loading

arosiclair commented Sep 12, 2023

melvin-bot bot commented Sep 12, 2023

melvin-bot bot commented Sep 12, 2023

melvin-bot bot commented Sep 12, 2023

melvin-bot bot commented Oct 13, 2023

melvin-bot bot commented Oct 13, 2023

melvin-bot bot commented Oct 13, 2023

melvin-bot bot commented Oct 13, 2023

melvin-bot bot commented Oct 16, 2023

melvin-bot bot commented Oct 16, 2023

melvin-bot bot commented Oct 16, 2023

melvin-bot bot commented Oct 16, 2023

flaviadefaria commented Oct 23, 2023

flaviadefaria commented Oct 23, 2023

sobitneupane commented Oct 30, 2023

sobitneupane commented Oct 30, 2023

sobitneupane commented Oct 30, 2023

JmillsExpensify commented Nov 3, 2023

kbecciv commented Sep 4, 2023 •

edited by melvin-bot bot

Loading

alphaboss1104 commented Sep 5, 2023 •

edited

Loading

ayazalavi commented Sep 5, 2023 •

edited

Loading

sobitneupane commented Sep 11, 2023 •

edited

Loading

ayazalavi commented Sep 12, 2023 •

edited

Loading