fix: fix initial render issue, input closes on hidden day

Signed-off-by: Rong Sen Ng (motss) <wes.ngrongsen@gmail.com>
motss · Apr 3, 2022 · bf24091 · bf24091
1 parent 4b16473
commit bf24091
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 22 deletions.
diff --git a/src/__demo__/demo-app.ts b/src/__demo__/demo-app.ts
@@ -17,6 +17,7 @@ import type { CustomEventDetail } from '../typings.js';
 
 @customElement('demo-app')
 export class DemoApp extends RootElement {
+  @state() _editable = false;
   @state() _outlined = false;
 
   @queryAsync(appDatePickerDialogName) dialog!: Promise<AppDatePickerDialog>;
@@ -83,7 +84,7 @@ export class DemoApp extends RootElement {
     ></app-date-picker>
 
     <app-date-picker
-      id="datePicker2"
+      id="datePicker3"
       .min=${'1970-01-01'}
       @date-updated=${this.#dateUpdated}
       showWeekNumber
@@ -100,18 +101,38 @@ export class DemoApp extends RootElement {
     ></app-date-picker-input>
 
     <app-date-picker-input
-      id="datePickerInput1"
-      ?outlined=${true}
+      id="datePickerInputOutlined1"
+      .outlined=${this._outlined}
       .label=${'DOB (yearGrid)'}
       .placeholder=${'Select your date of birth'}
       .max=${'2100-12-31'}
       .min=${'1970-01-01'}
       .value=${'2020-02-02'}
       .startView=${'yearGrid'}
     ></app-date-picker-input>
+    <input id=outlined1 type=checkbox .checked=${this._outlined} @input=${async () => {
+        this._outlined = !this._outlined;
+
+        const el = this.query<AppDatePickerInput>('#datePickerInputOutlined1');
+
+        if (el) {
+          /**
+           * NOTE(motss): Initial render with defined `outlined` and other properties will render
+           * everything correctly. However, updating any property that causes re-render will
+           * render the floating label incorrectly for unknown reasons. This is the workaround to
+           * always call `.layout()` manually and it cannot be done by the `DatePickerInput`
+           * internally.
+           */
+          await el.updateComplete;
+          await el.layout();
+        }
+      }} />
+    <label for=outlined1>
+      <span>Outlined</span>
+    </label>
 
     <app-date-picker-input
-      id="datePickerInput1"
+      id="datePickerInputDisabled1"
       ?outlined=${true}
       .label=${'Disabled DOB'}
       .placeholder=${'Select your date of birth'}
@@ -123,24 +144,19 @@ export class DemoApp extends RootElement {
     ></app-date-picker-input>
 
     <app-date-picker-input
-      ?outlined=${this._outlined}
       .label=${'Readonly DOB'}
       .max=${'2100-12-31'}
       .min=${'1970-01-01'}
       .placeholder=${'Select your date of birth'}
       .readOnly=${true}
       .startView=${'yearGrid'}
       .value=${'2020-02-02'}
-      id="datePickerInput1"
+      id="datePickerInputReadonly1"
     ></app-date-picker-input>
-    <input id=outlined1 type=checkbox .checked=${this._outlined} @input=${() => {
-      this._outlined = !this._outlined;
-    }} />
-    <label for=outlined1>
-      <span>Outlined</span>
-    </label>
 
-    <button data-id="datePickerDialog1" @click=${this.#showDialog}>Open</button>
+    <input type=date />
+
+    <button data-id="datePickerDialog" @click=${this.#showDialog}>Open</button>
     <app-date-picker-dialog id="datePickerDialog1"></app-date-picker-dialog>
 
     <button data-id="datePickerDialog2" @click=${this.#showDialog}>Open with optional properties</button>

diff --git a/src/date-picker-input-surface/date-picker-input-surface.ts b/src/date-picker-input-surface/date-picker-input-surface.ts
@@ -25,7 +25,7 @@ export class DatePickerInputSurface extends ElementMixin(MenuSurface) {
       (ev.composedPath() as HTMLElement[])
         .filter(({ nodeType }) => nodeType === Node.ELEMENT_NODE);
     const shouldClose =
-      elements.some(n => n.classList.contains('calendar-day')) ||
+      elements.some(n => n.classList.contains('calendar-day') && !n.hasAttribute('aria-hidden')) ||
       !elements.some(
         n =>
           alwaysOpenElementSet.has(n.localName as InferredFromSet<typeof alwaysOpenElementSet>)

diff --git a/src/date-picker-input/date-picker-input.ts b/src/date-picker-input/date-picker-input.ts
@@ -108,6 +108,14 @@ export class DatePickerInput extends ElementMixin(DatePickerMixin(DatePickerMinM
         input.removeEventListener('click', onClick);
       };
     }
+
+    /**
+     * NOTE(motss): This is a workaround to ensure all inner dependencies of  `TextField`
+     * will be updated accordingly and `.layout()` is called correctly.
+     */
+    /* c8 ignore next */
+    await this.outlineElement?.updateComplete;
+    await this.layout();
   }
 
   public override willUpdate(changedProperties: ChangedProperties<DatePickerInputProperties>): void {
@@ -136,14 +144,6 @@ export class DatePickerInput extends ElementMixin(DatePickerMixin(DatePickerMinM
 
       picker?.queryAll?.<AppIconButton>(appIconButtonName).forEach(n => n.layout());
     }
-
-    if (this.placeholder || this.label) {
-      /**
-       * NOTE(motss): This is a workaround to force the layout to update with any defined
-       * `placeholder` and/ or `label`.
-       */
-      this.layout();
-    }
   }
 
   public override render(): TemplateResult {