[HOLD for payment 2023-10-23][$1000] Settings - Cursor is not consistent on input in help page

[izarutskaya]

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:

1. Go to expensify help page help.expensify.com
2. Click on search icon to open search
3. Hover over input field
4. Notice weird behavior in cursor

Expected Result:

Cursor should show text format everywhere on input field. Also, when search is opened, the flashing | should automatically show to denote someone can immediately start typing their search request without having to click in the Search for something field.

Actual Result:

Cursor is showing text format only in bottom part of input field

Workaround:

Unknown

Platforms:

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

• Android / native
• Android / Chrome
• iOS / native
• iOS / Safari
• MacOS / Chrome / Safari
• MacOS / Desktop

Version Number: v1.3.57-5

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

Screen.Recording.2023-08-22.At.12.26.31.mp4

bandicam.2023-08-29.01-06-55-144.mp4

Expensify/Expensify Issue URL:

Issue reported by: @alitoshmatov

Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1692689166866949

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~016cf3b91c7facc3ff
• Upwork Job ID: 1698529155399421952
• Last Price Increase: 2023-09-27
• Automatic offers:
• aimane-chnaif | Reviewer | 27106249
• getusha | Contributor | 27106251
• alitoshmatov | Reporter | 27106253

[melvin-bot]

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

[melvin-bot]

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

[alitoshmatov]

Proposal

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

Cursor is not consistent on input in help page

What is the root cause of that problem?

Label is on top of the input field and cursor text is only applied to input field, that is why cursor text is only shown on the bottom part of the input field where label is not on top of input element

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

Not only clicking on input but outside also is focusing the input field, that is why I think we should apply cursor: text to the element higher in element tree.
I found this element's whole area is clickable and focuses input element

So we can create selector to this element and apply cursor: text in https://github.com/Expensify/App/blob/main/docs/_sass/_search-bar.scss

What alternative solutions did you explore? (Optional)

[mallenexpensify]

This isn't specifically a NewDot bug but... it's a bug and the help page is accessible via NewDot so I think we should fix it (and, do so via a Contributor if possible). I updated the OP to include this too, since both these seems like quick fixes.

Also, when search is opened, the flashing | should automatically show to denote someone can immediately start typing their search request without having to click in the Search for something field.

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~016cf3b91c7facc3ff

[melvin-bot]

Triggered auto assignment to @trjExpensify (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.