From b41ee62e59446bb2338e3f05b9d81f6c304fe68b Mon Sep 17 00:00:00 2001
From: Eric Eastwood <contact@ericeastwood.com>
Date: Thu, 17 Feb 2022 21:10:36 -0600
Subject: [PATCH] Add year select fallback for Firefox

---
 public/styles/styles.css            | 10 ++++++++++
 shared/hydrogen-vm-render-script.js | 10 +++++-----
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/public/styles/styles.css b/public/styles/styles.css
index 5adb8e6..ab1047a 100644
--- a/public/styles/styles.css
+++ b/public/styles/styles.css
@@ -66,16 +66,24 @@ html {
   right: 0;
 
   opacity: 0;
+
+  cursor: pointer;
 }
 
 .fallback-input-month .CalendarView_heading_monthInput {
   display: none;
 }
 
+/* The little calendar icon button in the input that opens the date picker.
+ * We're stretching this out over the heading */
 .CalendarView_heading_monthInput::-webkit-calendar-picker-indicator {
   width: 100%;
   height: 100%;
+  margin-left: 0;
+
   background-color: #f00;
+
+  cursor: pointer;
 }
 
 .CalendarView_heading_yearSelectFallback {
@@ -91,6 +99,8 @@ html {
   height: 100%;
 
   opacity: 0;
+
+  cursor: pointer;
 }
 
 .fallback-input-month .CalendarView_heading_yearSelectFallback {
diff --git a/shared/hydrogen-vm-render-script.js b/shared/hydrogen-vm-render-script.js
index 7a31376..2c916dc 100644
--- a/shared/hydrogen-vm-render-script.js
+++ b/shared/hydrogen-vm-render-script.js
@@ -258,15 +258,15 @@ async function mountHydrogen() {
     }
 
     onMonthInputChange(e) {
-      const selectedDate = new Date(e.target.valueAsDate);
-      console.log('onMonthInputChange selectedDate', selectedDate, e.target.valueAsDate);
-      this._calendarDate = selectedDate;
+      this._calendarDate = e.target.valueAsDate;
       this.emitChange('calendarDate');
     }
 
     onYearFallbackSelectChange(e) {
-      // TODO
-      console.log('onYearFallbackSelectChange', e);
+      const selectedDate = new Date(this._calendarDate);
+      selectedDate.setUTCFullYear(e.target.value);
+      this._calendarDate = selectedDate;
+      this.emitChange('calendarDate');
     }
   }