[$1000] Date picker is not centered and has too small clickable area

[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. Go to any view with a date picker
2. Ex: Workspace -> Connect Bank Account -> Connect Manual -> Company Step -> Check Incorporation date

Expected Result:

The calendar icon should be centered vertically and clickable anywhere as we do for password hide show.

Actual Result:

Icon is not centered and has very small clickable area

Workaround:

unknown

Platform:

Where is this issue occurring?

• Web
• Desktop App
• mobile web - Pop up not aligned

Version Number: 1.2.30-0
Reproducible in staging?: y
Reproducible in production?: No credentials to check
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos:
https://user-images.githubusercontent.com/43996225/203600161-5654b7fd-6682-40a9-8530-b75fe04c37e6.mov

https://user-images.githubusercontent.com/43996225/203600179-d2758ed5-df72-43c7-ac8d-acef91305879.mov

https://user-images.githubusercontent.com/43996225/203600448-461332bf-edff-4ed7-b2c6-02190895941a.mp4
Expensify/Expensify Issue URL:
Issue reported by: @Santhosh-Sellavel
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1669169036468899

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01a1478c10c7c22d0c
• Upwork Job ID: 1597292879110447104

[melvin-bot]

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

[dhairyasenjaliya]

Proposal

• In order to increase the area of clickable we need to add the same height as the text input
• Then we need to increase the horizontal clickable area by adding padding
• Also need to adjust center alignment by adding appropriate top spacing
• Note also this calendar icon is visible only on chrome based app (chrome and desktop only)

.expensify-datepicker::-webkit-calendar-picker-indicator {
    position: absolute;
-    right: 12px;
-    top: 13px;
+    right: 0px;
+    height: 52px;
+    padding: 20px;
+    padding-right: 12px;
+    margin-top: 20px;
}

Result

Chrome

Increased touch area

Screen.Recording.2022-11-25.at.4.06.00.PM.mov

MWeb

Desktop

Result without fix

[melvin-bot]

Triggered auto assignment to @grgia (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[bfitzexpensify]

Agree this could be improved.

[varshamb]

Proposal

Instead making Date Picker in centre I propose make it aligned with date input text.
for this change position to relative.

position: relative;

App/src/components/DatePicker/styles.css

Lines 8 to 9 in 0274c4a

	.expensify-datepicker::-webkit-calendar-picker-indicator {
	position: absolute;

[JmillsExpensify]

I think we should make this External @bfitzexpensify. Can you apply that label so that proposals can be evaluated?

[melvin-bot]

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