Browse Source

ref(timePicker): Hide native Chrome time picker (#50582)

Remove Chrome's native time picker panel and indicator (clock icon):
<img width="319" alt="Screenshot 2023-06-08 at 11 39 08 AM"
src="https://github.com/getsentry/sentry/assets/44172267/4fd7cce8-8aff-433a-9aa6-328e8273c75d">

Other browsers, including Firefox & Safari, don't have them:
<img width="327" alt="image"
src="https://github.com/getsentry/sentry/assets/44172267/57473777-6751-42cb-8255-df6edca9356f">

The remaining input box is still very much usable and accessible. Users
can either type in the full time value or use arrow keys to move between
segments (arrow left/right) and change the values (arrow up/down):
<img width="319" alt="Screenshot 2023-06-08 at 11 44 43 AM"
src="https://github.com/getsentry/sentry/assets/44172267/42f1404f-1bb3-406c-8e8f-1f61aa0b8510">
Vu Luong 1 year ago
parent
commit
c56aa57dfd

+ 4 - 0
static/app/components/organizations/timeRangeSelector/timePicker.tsx

@@ -109,6 +109,10 @@ const TimePicker = styled(
 `;
 
 const Input = styled('input')`
+  &::-webkit-calendar-picker-indicator {
+    display: none;
+  }
+
   &.rdrDateDisplayItem {
     width: 100%;
     background: ${p => p.theme.backgroundSecondary};