feat(scrolling): auto-scroll to focusdate when opening the mobile dat…

…epicker the first time
AlaskaAirlines · Apr 23, 2024 · c6f44fd · c6f44fd
1 parent 9d1d955
commit c6f44fd
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 8 deletions.
diff --git a/demo/api.md b/demo/api.md
@@ -73,7 +73,7 @@
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/basic.html) -->
   <!-- The below content is automatically added from ./../../apiExamples/basic.html -->
-  <auro-datepicker range calendarStartDate="01/11/2024" calendarEndDate="11/01/2024" minDate="02/12/2024" maxDate="09/20/2024" centralDate="07/20/2024" value="06/20/2024" valueEnd="09/04/2024">
+  <auro-datepicker>
     <span slot="fromLabel">Choose a date</span>
     <span slot="mobileDateLabel">Choose a date</span>
   </auro-datepicker>
@@ -85,7 +85,7 @@
 <!-- The below code snippet is automatically added from ./../../apiExamples/basic.html -->
 
 ```html
-<auro-datepicker range calendarStartDate="01/11/2024" calendarEndDate="11/01/2024" minDate="02/12/2024" maxDate="09/20/2024" centralDate="07/20/2024" value="06/20/2024" valueEnd="09/04/2024">
+<auro-datepicker>
   <span slot="fromLabel">Choose a date</span>
   <span slot="mobileDateLabel">Choose a date</span>
 </auro-datepicker>
@@ -658,7 +658,7 @@ Sets the label used for the input. When the `range` attribute is used this is th
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/basic.html) -->
   <!-- The below content is automatically added from ./../../apiExamples/basic.html -->
-  <auro-datepicker range calendarStartDate="01/11/2024" calendarEndDate="11/01/2024" minDate="02/12/2024" maxDate="09/20/2024" centralDate="07/20/2024" value="06/20/2024" valueEnd="09/04/2024">
+  <auro-datepicker>
     <span slot="fromLabel">Choose a date</span>
     <span slot="mobileDateLabel">Choose a date</span>
   </auro-datepicker>
@@ -670,7 +670,7 @@ Sets the label used for the input. When the `range` attribute is used this is th
 <!-- The below code snippet is automatically added from ./../../apiExamples/basic.html -->
 
 ```html
-<auro-datepicker range calendarStartDate="01/11/2024" calendarEndDate="11/01/2024" minDate="02/12/2024" maxDate="09/20/2024" centralDate="07/20/2024" value="06/20/2024" valueEnd="09/04/2024">
+<auro-datepicker>
   <span slot="fromLabel">Choose a date</span>
   <span slot="mobileDateLabel">Choose a date</span>
 </auro-datepicker>
@@ -712,7 +712,7 @@ Sets the label used for the selected date display at the top of the bib when vie
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/basic.html) -->
   <!-- The below content is automatically added from ./../../apiExamples/basic.html -->
-  <auro-datepicker range calendarStartDate="01/11/2024" calendarEndDate="11/01/2024" minDate="02/12/2024" maxDate="09/20/2024" centralDate="07/20/2024" value="06/20/2024" valueEnd="09/04/2024">
+  <auro-datepicker>
     <span slot="fromLabel">Choose a date</span>
     <span slot="mobileDateLabel">Choose a date</span>
   </auro-datepicker>
@@ -724,7 +724,7 @@ Sets the label used for the selected date display at the top of the bib when vie
 <!-- The below code snippet is automatically added from ./../../apiExamples/basic.html -->
 
 ```html
-<auro-datepicker range calendarStartDate="01/11/2024" calendarEndDate="11/01/2024" minDate="02/12/2024" maxDate="09/20/2024" centralDate="07/20/2024" value="06/20/2024" valueEnd="09/04/2024">
+<auro-datepicker>
   <span slot="fromLabel">Choose a date</span>
   <span slot="mobileDateLabel">Choose a date</span>
 </auro-datepicker>

diff --git a/src/auro-calendar.js b/src/auro-calendar.js
@@ -203,6 +203,15 @@ export class AuroCalendar extends RangeDatepicker {
     return renderedHtml;
   }
 
+  /**
+   * Request the calendar be scrolled to a given date.
+   * @param {String} date - The date to scroll into view.
+   * @returns {void}
+   */
+  scrollMonthIntoView(date) {
+    this.utilCal.scrollMonthIntoView(this, date);
+  }
+
   firstUpdated() {
     this.addEventListener('date-from-changed', () => {
       this.dispatchEvent(new CustomEvent('auroCalendar-dateSelected', {

diff --git a/src/auro-datepicker.js b/src/auro-datepicker.js
@@ -118,6 +118,11 @@ export class AuroDatePicker extends LitElement {
      */
     this.dateSlotContent = [];
 
+    /**
+     * @private
+     */
+    this.forceScrollOnNextMobileCalendarRender = false;
+
     /**
      * Generate unique names for dependency components.
      */
@@ -244,6 +249,8 @@ export class AuroDatePicker extends LitElement {
   handleFocusDateChange() {
     if (this.calendarFocusDate) {
       this.centralDate = this.calendarFocusDate;
+
+      this.forceScrollOnNextMobileCalendarRender = true;
     }
   }
 
@@ -469,6 +476,13 @@ export class AuroDatePicker extends LitElement {
     this.dropdown.addEventListener('auroDropdown-toggled', () => {
       this.setAttribute('aria-expanded', this.dropdown.isPopoverVisible);
       this.notifyDatepickerToggled();
+
+      if (this.dropdown.getAttribute('data-show')) {
+        if (this.forceScrollOnNextMobileCalendarRender) {
+          this.calendar.scrollMonthIntoView(this.calendarFocusDate);
+          this.forceScrollOnNextMobileCalendarRender = false;
+        }
+      }
     });
 
     if (!this.dropdown.hasAttribute('aria-expanded')) {

diff --git a/src/utilitiesCalendar.js b/src/utilitiesCalendar.js
@@ -5,6 +5,22 @@ export class CalendarUtilities {
     this.util = new AuroDatepickerUtilities();
   }
 
+
+  /**
+   * Scroll the calendar month list to a given date.
+   * @param {Object} elem - The calendar element.
+   * @param {String} date - The date to scroll into view.
+   * @returns {void}
+   */
+  scrollMonthIntoView(elem, date) {
+    const month = new Date(date).getMonth() + 1;
+    const year = new Date(date).getFullYear();
+    const selector = `#month-${month}-${year}`;
+    const monthElem = elem.shadowRoot.querySelector(selector);
+
+    monthElem.scrollIntoView();
+  }
+
   /**
    * Sends an event requesting the dropdown bib be closed.
    * @private

diff --git a/src/utilitiesCalendarRender.js b/src/utilitiesCalendarRender.js
@@ -119,9 +119,10 @@ export class UtilitiesCalendarRender {
   renderCalendar(elem, month, year) {
     return html`
       <auro-calendar-month
+        id="${`month-${month}-${year}`}"
         .disabledDays="${elem.disabledDays}"
-        min="${elem.min}"
-        max="${elem.max}"
+        .min="${elem.min}"
+        .max="${elem.max}"
         ?noRange="${elem.noRange}"
         .hoveredDate="${elem.hoveredDate}"
         .dateTo="${elem.dateTo}"