fix(picker): prevent the Menu opening until required dependencies are…

… loaded
adobe · Dec 19, 2023 · 55e6174 · 55e6174
1 parent ae9fcd2
commit 55e6174
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 2 deletions.
diff --git a/packages/picker/src/Picker.ts b/packages/picker/src/Picker.ts
@@ -392,12 +392,14 @@ export class PickerBase extends SizedMixin(Focusable, { noDefaultSize: true }) {
     };
 
     protected renderOverlay(menu: TemplateResult): TemplateResult {
+        const container = this.renderContainer(menu);
+        this.trackDependency('sp-overlay');
         import('@spectrum-web-components/overlay/sp-overlay.js');
         return html`
             <sp-overlay
                 .triggerElement=${this as HTMLElement}
                 .offset=${0}
-                ?open=${this.open}
+                ?open=${this.open && this.dependenciesLoaded}
                 .placement=${this.isMobile.matches ? undefined : this.placement}
                 .type=${this.isMobile.matches ? 'modal' : 'auto'}
                 .receivesFocus=${'true'}
@@ -419,7 +421,7 @@ export class PickerBase extends SizedMixin(Focusable, { noDefaultSize: true }) {
                     }
                 }}
             >
-                ${this.renderContainer(menu)}
+                ${container}
             </sp-overlay>
         `;
     }
@@ -521,13 +523,37 @@ export class PickerBase extends SizedMixin(Focusable, { noDefaultSize: true }) {
         `;
     }
 
+    @state()
+    private dependenciesLoaded = false;
+    private dependenciesToLoad: Record<string, boolean> = {};
+
+    private trackDependency(dependency: string, flag?: boolean): void {
+        const loaded =
+            !!customElements.get(dependency) ||
+            this.dependenciesToLoad[dependency] ||
+            !!flag;
+        if (!loaded) {
+            customElements.whenDefined(dependency).then(() => {
+                this.trackDependency(dependency, true);
+            });
+        }
+        this.dependenciesToLoad = {
+            ...this.dependenciesToLoad,
+            [dependency]: loaded,
+        };
+        this.dependenciesLoaded = Object.values(this.dependenciesToLoad).every(
+            (loaded) => loaded
+        );
+    }
+
     protected renderContainer(menu: TemplateResult): TemplateResult {
         const accessibleMenu = html`
             ${this.dismissHelper} ${menu} ${this.dismissHelper}
         `;
         // @todo: test in mobile
         /* c8 ignore next 11 */
         if (this.isMobile.matches) {
+            this.trackDependency('sp-tray');
             import('@spectrum-web-components/tray/sp-tray.js');
             return html`
                 <sp-tray
@@ -539,6 +565,7 @@ export class PickerBase extends SizedMixin(Focusable, { noDefaultSize: true }) {
                 </sp-tray>
             `;
         }
+        this.trackDependency('sp-popover');
         import('@spectrum-web-components/popover/sp-popover.js');
         return html`
             <sp-popover

diff --git a/packages/picker/src/picker.css b/packages/picker/src/picker.css
@@ -105,3 +105,7 @@ sp-menu {
     width: 1px;
     white-space: nowrap;
 }
+
+sp-overlay:not(:defined) {
+    display: none;
+}