[$1000] Multiline inputs have cursor pointer over its label name but single line inputs have 'I' cursor over its label name

[kavimuru]

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. Open the app
2. Open settings
3. Open Security
4. Open close account
5. Click and Hover over message label i.e. hover over 'Enter message here' to see that cursor is displayed as pointer
6. For single line input, visit settings->profile->display name and click and hover over first name and last name input label to observe that it displays 'I' cursor

Expected Result:

App should maintain consistency and display 'I' cursor over label of inputs like it does for single line input

Actual Result:

App displays pointer cursor on label of multiline input instead of single line input

Workaround:

Can the user still use Expensify without this being fixed? Have you informed them of the workaround?

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: 1.3.36-1
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

cursor.pointer.over.multiline.input.mp4

Recording.1132.mp4

Expensify/Expensify Issue URL:
Issue reported by: @dhanashree-sawant
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1685951694011049

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01688c55b644b2f2fb
• Upwork Job ID: 1677067297182765056
• Last Price Increase: 2023-07-20

[melvin-bot]

Triggered auto assignment to @kevinksullivan (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

[raphaelppp]

Proposal

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

The BaseTextInput has an upper area that displays the wrong cursor.

What is the root cause of that problem?

The style textInputMultilineContainer adds some padding, which reveals the underlying PressableButton.

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

• I added a 23px top dark border and a 0px top padding to a new style: textInputMultilineLabelled.
• I deleted textInputMultilineContainer: it was specifiying a 23px padding on the container.
• I deleted the 23px dark view behind the label.
• I added a 23px top padding on the visible input on Android, since on this platform the border does not offset the position
• I disabled the pv0 style for the multiline case: it was zeroing the top padding (redundant for web, conflicting for Android) and the bottom padding (likely unintended)
• I corrected the body of getAutoGrowHeightInputStyle to adjust the height formula to the new layout.
• I ensured the visible and hidden inputs within BaseTextInput share the same base styles.
• I replaced the isLabeledMultiline condition in Index.js. Instead I use isMultiline and its definition includes autoGrowHeight. Its function was, and still is, to add a top padding to the scroll bar.

[samh-nl]

Proposal

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

Multiline inputs have a pointer cursor when hovering over the label, contrasting with single line inputs that have a text cursor.

What is the root cause of that problem?

The BaseTextInput internally uses PressableWithoutFeedback, which applies a pointer cursor.
This cursor is inadvertently exposed to the user via padding that is present in a div element wrapping the textarea (see red arrow below):

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

Option 1: To solve this issue, paddingTop must be applied directly to the textarea, instead of the wrapping div element.

This involves moving isMultiline && hasLabel && styles.textInputMultilineContainer below:

App/src/components/TextInput/BaseTextInput.js

Line 285 in 60f4817

style={[styles.textInputAndIconContainer, isMultiline && hasLabel && styles.textInputMultilineContainer]}

App/src/styles/styles.js

Lines 922 to 924 in 60f4817

	textInputMultilineContainer: {
	paddingTop: 23,
	},

Option 2: To fix the problem associated with the scrollbars, we apply a border-top (instead of top padding) of equal size and change box-sizing from border-box to content-box to ensure the auto growing algorithm is not affected.

To the RNTextInput component to add paddingTop in the case of multi-line inputs. The styling class would be named more appropriately, such as styles.textInputMultiline.

Optionally (can be seen as a separate issue), we can apply pointer-events: none; to the wrapping div to prevent the pointer cursor from being applied to the bottom border:

What alternative solutions did you explore? (Optional)

N/A

EDIT: Revised proposal.

[kevinksullivan]

discussing in slack

https://expensify.slack.com/archives/C049HHMV9SM/p1688415729515179?thread_ts=1685951694.011049&cid=C049HHMV9SM

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~01688c55b644b2f2fb

[melvin-bot]

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