From 1123f8efe6d7f9cd3a625000544991a7d447f401 Mon Sep 17 00:00:00 2001
From: "Rong Sen Ng (motss)" <wes.ngrongsen@gmail.com>
Date: Sat, 26 Feb 2022 22:51:24 +0800
Subject: [PATCH] fix: fix datePicker renders when inputSurface is not loaded

Signed-off-by: Rong Sen Ng (motss) <wes.ngrongsen@gmail.com>
---
 index.html                                 |  1 +
 src/__demo__/demo-app.ts                   |  6 +++---
 src/date-picker-input/date-picker-input.ts | 10 ++++++++--
 3 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/index.html b/index.html
index 3cbe0506..09c409b3 100644
--- a/index.html
+++ b/index.html
@@ -116,6 +116,7 @@
         --app-selected-on-focus: var(--on-primary);
         --app-selected-on-hover: var(--on-primary);
         --app-shape: 8px;
+        --app-surface: var(--surface);
         --app-today: var(--white);
         --date-picker-input-icon: var(--white);
       }
diff --git a/src/__demo__/demo-app.ts b/src/__demo__/demo-app.ts
index b621fc17..d92de351 100644
--- a/src/__demo__/demo-app.ts
+++ b/src/__demo__/demo-app.ts
@@ -1,8 +1,8 @@
-// import '../date-picker/app-date-picker.js';
-// import '../date-picker-dialog/app-date-picker-dialog.js';
-// import '../date-picker-input-surface/app-date-picker-input-surface.js';
+import '../date-picker/app-date-picker.js';
 import '../date-picker-input/app-date-picker-input.js';
 
+// import '../date-picker-dialog/app-date-picker-dialog.js';
+// import '../date-picker-input-surface/app-date-picker-input-surface.js';
 import { css, html } from 'lit';
 import { customElement, queryAsync } from 'lit/decorators.js';
 
diff --git a/src/date-picker-input/date-picker-input.ts b/src/date-picker-input/date-picker-input.ts
index 3b349050..6f486741 100644
--- a/src/date-picker-input/date-picker-input.ts
+++ b/src/date-picker-input/date-picker-input.ts
@@ -3,6 +3,7 @@ import '../icon-button/app-icon-button.js';
 
 import { TextField } from '@material/mwc-textfield';
 import type { TemplateResult } from 'lit';
+import { nothing } from 'lit';
 import { html } from 'lit';
 import { property, queryAsync, state } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
@@ -135,11 +136,16 @@ export class DatePickerInput extends ElementMixin(DatePickerMixin(DatePickerMinM
   }
 
   public override render(): TemplateResult {
-    if (!this._lazyLoaded && this._open) this.#lazyLoad();
+    const {
+      _lazyLoaded,
+      _open,
+    } = this;
+
+    if (!_lazyLoaded && _open) this.#lazyLoad();
 
     return html`
     ${super.render()}
-    ${this.$renderContent()}
+    ${_lazyLoaded && _open ? this.$renderContent() : nothing}
     `;
   }