test: update tests, fix datePicker opens with a clean slate in input

Signed-off-by: Rong Sen Ng (motss) <wes.ngrongsen@gmail.com>

src/__demo__/demo-app.ts

@@ -92,6 +92,17 @@ export class DemoApp extends RootElement {
       .value=${'2020-02-02'}
     ></app-date-picker-input>
 
+    <app-date-picker-input
+      id="datePickerInput1"
+      ?outlined=${true}
+      .label=${'DOB'}
+      .placeholder=${'Select your date of birth'}
+      .max=${'2100-12-31'}
+      .min=${'1970-01-01'}
+      .value=${'2020-02-02'}
+      .startView=${'yearGrid'}
+    ></app-date-picker-input>
+
     <button data-id="datePickerDialog1" @click=${this.#showDialog}>Open</button>
     <app-date-picker-dialog id="datePickerDialog1"></app-date-picker-dialog>
 

src/__tests__/date-picker-input/app-date-picker-input.test.ts

@@ -111,6 +111,7 @@ describe(appDatePickerInputName, () => {
   ];
   casesOptionalLocale.forEach(a => {
     const [testLocale, expectedLocale] = a;
+
     it(
       messageFormatter('renders with optional locale (%s)', testLocale),
       async () => {
@@ -216,7 +217,7 @@ describe(appDatePickerInputName, () => {
     datePicker = el.query<AppDatePicker>(elementSelectors.datePicker);
 
     expect(datePickerInputSurface).exist;
-    expect(datePicker).exist;
+    expect(datePicker).not.exist;
   });
 
   type CaseCloseDatePickerByTriggerType = [
@@ -273,8 +274,7 @@ describe(appDatePickerInputName, () => {
             break;
           }
           case 'escape': {
-            await sendKeys({ down: keyEscape });
-            await sendKeys({ up: keyEscape });
+            await sendKeys({ press: keyEscape });
             break;
           }
           case 'tab': {
@@ -283,7 +283,11 @@ describe(appDatePickerInputName, () => {
             expect(yearDropdown).exist;
 
             yearDropdown?.focus();
-            for (const _ of Array(4)) await sendKeys({ press: keyTab });
+
+            for (const _ of Array(4)) {
+              await sendKeys({ press: keyTab });
+            }
+
             break;
           }
           default:
@@ -298,7 +302,7 @@ describe(appDatePickerInputName, () => {
         datePicker = el.query<AppDatePicker>(elementSelectors.datePicker);
 
         expect(datePickerInputSurface).exist;
-        expect(datePicker).exist;
+        expect(datePicker).not.exist;
       }
     );
   });
@@ -330,8 +334,7 @@ describe(appDatePickerInputName, () => {
           CustomEvent<unknown>>(el, 'opened');
 
         el.focus();
-        await sendKeys({ down: testKey });
-        await sendKeys({ up: testKey });
+        await sendKeys({ press: testKey });
 
         const opened = await openedTask;
         await el.updateComplete;
@@ -449,8 +452,7 @@ describe(appDatePickerInputName, () => {
           CustomEvent<DialogClosedEventDetail>>(el, 'closed');
 
         newSelectedDate?.focus();
-        await sendKeys({ down: testKey });
-        await sendKeys({ up: testKey });
+        await sendKeys({ press: testKey });
 
         await closedTask;
         await el.updateComplete;
@@ -507,7 +509,7 @@ describe(appDatePickerInputName, () => {
     expect(closed).not.undefined;
   });
 
-  it('always re-opens in calendar view', async () => {
+  it('always re-opens in the correct startView', async () => {
     const el = await fixture<AppDatePickerInput>(
       html`<app-date-picker-input
         .label=${label}
@@ -564,8 +566,11 @@ describe(appDatePickerInputName, () => {
     yearGrid = datePicker?.query<AppYearGrid>(elementSelectors.yearGrid);
     const monthCalendar = datePicker?.query<AppMonthCalendar>(elementSelectors.monthCalendar);
 
-    // ensure calendar view when it re-opens
-    expect(monthCalendar).exist;
+    /**
+     * NOTE: Year view should render when it re-opens because `.startView=${'yearGrid'}` is set
+     */
+    expect(monthCalendar).not.exist;
+    expect(yearGrid).exist;
   });
 
 });

src/date-picker-input-surface/stylings.ts

@@ -14,6 +14,8 @@ export const DatePickerInputSurfaceStyling = css`
 
   display: block;
   position: absolute; /* NOTE(motss): Set this so that surface can be placed on top of its anchor element */
+  top: 0; /** NOTE(motss): This ensures inputSurface renders downwards on top of input */
+  bottom: 0; /** NOTE(motss): This ensures inputSurface renders upwards on top of input */
 }
 
 .mdc-menu-surface.mdc-menu-surface--open {

src/date-picker-input/date-picker-input.ts

@@ -145,7 +145,7 @@ export class DatePickerInput extends ElementMixin(DatePickerMixin(DatePickerMinM
 
     return html`
     ${super.render()}
-    ${_lazyLoaded && _open ? this.$renderContent() : nothing}
+    ${_lazyLoaded ? this.$renderContent() : nothing}
     `;
   }
 
@@ -220,7 +220,12 @@ export class DatePickerInput extends ElementMixin(DatePickerMixin(DatePickerMinM
       ?stayOpenOnBodyClick=${true}
       .anchor=${this as HTMLElement}
       @closed=${this.#onClosed}
-    >${this.$renderSlot()}</app-date-picker-input-surface>
+    >${
+      /**
+       * NOTE(motss): This removes/ renders datePicker with a clean slate.
+       */
+      this._open ? this.$renderSlot() : nothing
+    }</app-date-picker-input-surface>
     `;
   }
 
@@ -319,6 +324,12 @@ export class DatePickerInput extends ElementMixin(DatePickerMixin(DatePickerMinM
       }
     }
 
+    /**
+     * NOTE(motss): `#lazyLoad()` is called within `render()` so this needs to wait for next update
+     * to re-trigger update when it updates `_lazyLoaded`.
+     */
+    await this.updateComplete;
+
     this.#lazyLoading = false;
     this._lazyLoaded = true;
   };
@@ -333,7 +344,6 @@ export class DatePickerInput extends ElementMixin(DatePickerMixin(DatePickerMinM
 
   #onClosed = ({ detail }: CustomEvent): void => {
     this._open = false;
-    this.#picker && (this.#picker.startView = 'calendar');
     this.fire({ detail, type: 'closed' });
   };