[HOLD #16660] [$1000] Web - "S" label beign selected when clicking on the arrow

[kbecciv]

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. Click on your avatar
2. Go to profile settings
3. Go to personal details
4. Select Date of Birth option
5. Click on the Month arrow

Expected Result:

The labels shouldn't be selectable and the user should be able to navigate through the months smoothly without "S" label being selected

Actual Result:

clicking on the arrow 3 times for example changes the month once and it selects the "S" label, and the user is not able to navigate through the months smoothly without "S" label being selected

Workaround:

Unknown

Platforms:

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

• [ ] Android / native
• [ ] Android / Chrome
• [ ] iOS / native
• [ ] iOS / Safari
• [x] MacOS / Chrome / Safari
• [ ] MacOS / Desktop

Version Number: 1.3.35-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

https://github.com/Expensify/App/assets/93399543/5903b5d2-a912-46a3-8d8b-10d176ca02ff

https://github.com/Expensify/App/assets/93399543/75adc279-e225-46d5-b8a0-039e44b7101b

Expensify/Expensify Issue URL: Issue reported by: @mejed-alkoutaini Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1688317447895809

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~012b71144b2d92bd9a
• Upwork Job ID: 1676184442338570240
• Last Price Increase: 2023-07-04

[melvin-bot[bot]]

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

[melvin-bot[bot]]

Bug0 Triage Checklist (Main S/O)

• [x] This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• [x] 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
• [x] 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.
• [x] 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.
• [x] I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[ginsuma]

Proposal

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

Web - "S" label beign selected when clicking on the arrow

What is the root cause of that problem?

Try to select text in the nearest DOM element when double clicking is a behavior of browser.

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

Add styles.userSelectNone to: https://github.com/Expensify/App/blob/3b687018c3d907f1bcdea8f9a4a8cae90101959f/src/components/CalendarPicker/index.js#L262-L265

[melvin-bot[bot]]

Job added to Upwork: https://www.upwork.com/jobs/~012b71144b2d92bd9a

[melvin-bot[bot]]

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

[melvin-bot[bot]]

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

[parasharrajat]

We should hold this issue on React Native web upgrade. There was one issue where we discussed a holistic solution to all such issues. It might not be worth it to apply patches. There are a few places in the App where this issue occurs.

And, I wasn't able to find the related issue link so please search it.

[dylanexpensify]

Putting on hold

[dylanexpensify]

@parasharrajat any update on this one?

[dylanexpensify]

Bumping @parasharrajat

[parasharrajat]

Here is the issue which we are tracking for this one https://github.com/Expensify/App/issues/16660

[dylanexpensify]

Reviewing today!

[dylanexpensify]

still on hold!

[dylanexpensify]

H - O - L - D

[dylanexpensify]

on hold, @Santhosh-Sellavel shall we move to weekly?

[Santhosh-Sellavel]

@dylanexpensify Yes I guess

[sophiepintoraetz]

@parasharrajat - do you have an idea on when the react native upgrade will happen? @ginsuma suggested that we put #23402 on hold because it's a similar behaviour?

[dylanexpensify]

Hold

[parasharrajat]

@sophiepintoraetz Probably in next weeks. we are very close to merge the RN upgrade and I think next will be RN-web.

[dylanexpensify]

hold

[dylanexpensify]

hold

[dylanexpensify]

Hold

[dylanexpensify]

Hold

[dylanexpensify]

Hold

[dylanexpensify]

Hold

[dylanexpensify]

Reviewing!

[dylanexpensify]

Hold - @parasharrajat any update?

[parasharrajat]

@dylanexpensify #16660 is still in progress.

[dylanexpensify]

TY

[dylanexpensify]

still in progress

[dylanexpensify]

Holding still!

[dylanexpensify]

same

[dylanexpensify]

holding

[dylanexpensify]

same

[dylanexpensify]

Holding

[dylanexpensify]

same

[dylanexpensify]

@parasharrajat any updates? Shall we see if this is even reproducible now?

[dylanexpensify]

yeah can't repro