fix: fix datePicker renders when inputSurface is not loaded

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

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);
       }

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';
 

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}
     `;
   }