chore: updated the strategy to include the dependency controller

packages/picker/src/InteractionController.ts

@@ -46,10 +46,13 @@ export class InteractionController implements ReactiveController {
      * Set `open`
      */
     public set open(open: boolean) {
+        if (this._open === open) return;
         this._open = open;
         if (this.overlay) {
             // If there already is an Overlay, apply the value of `open` directly.
-            this.overlay.open = open;
+            if (this.host.dependencyManager.loaded) {
+                this.overlay.open = open;
+            }
             this.host.open = open;
             return;
         }
@@ -68,7 +71,10 @@ export class InteractionController implements ReactiveController {
                     '@spectrum-web-components/overlay/src/Overlay.js'
                 );
                 this.overlay = new Overlay();
-                this.overlay.open = true;
+                this.host.requestUpdate();
+                if (this.host.dependencyManager.loaded) {
+                    this.overlay.open = open;
+                }
                 this.host.open = true;
             });
         import('@spectrum-web-components/overlay/sp-overlay.js');
@@ -95,6 +101,7 @@ export class InteractionController implements ReactiveController {
     ) {
         this.target = target;
         this.host = host;
+        this.host.addController(this);
         this.init();
     }
 
@@ -175,4 +182,14 @@ export class InteractionController implements ReactiveController {
     hostDisconnected(): void {
         this.abortController?.abort();
     }
+
+    public hostUpdated(): void {
+        if (
+            this.overlay &&
+            this.host.dependencyManager.loaded &&
+            this.host.open
+        ) {
+            this.overlay.open = true;
+        }
+    }
 }

packages/picker/src/Picker.ts

@@ -71,15 +71,15 @@ export const DESCRIPTION_ID = 'option-picker';
 export class PickerBase extends SizedMixin(Focusable, { noDefaultSize: true }) {
     public isMobile = new MatchMediaController(this, IS_MOBILE);
 
-    public strategy?: DesktopController | MobileController;
+    public strategy!: DesktopController | MobileController;
 
     @state()
     appliedLabel?: string;
 
     @query('#button')
     public button!: HTMLButtonElement;
 
-    private dependencyManager = new DependencyManagerController(this);
+    public dependencyManager = new DependencyManagerController(this);
 
     private deprecatedMenu: Menu | null = null;
 
@@ -217,6 +217,7 @@ export class PickerBase extends SizedMixin(Focusable, { noDefaultSize: true }) {
         } else {
             // Non-cancelable "change" events announce a selection with no value
             // change that should close the Picker element.
+            this.open = false;
             if (this.strategy) {
                 this.strategy.open = false;
             }
@@ -249,6 +250,7 @@ export class PickerBase extends SizedMixin(Focusable, { noDefaultSize: true }) {
         item: MenuItem,
         menuChangeEvent?: Event
     ): Promise<void> {
+        this.open = false;
         // should always close when "setting" a value
         if (this.strategy) {
             this.strategy.open = false;
@@ -278,6 +280,7 @@ export class PickerBase extends SizedMixin(Focusable, { noDefaultSize: true }) {
             }
             this.selectedItem = oldSelectedItem;
             this.value = oldValue;
+            this.open = true;
             if (this.strategy) {
                 this.strategy.open = true;
             }
@@ -304,9 +307,9 @@ export class PickerBase extends SizedMixin(Focusable, { noDefaultSize: true }) {
         if (this.readonly || this.pending) {
             return;
         }
+        this.open = typeof target !== 'undefined' ? target : !this.open;
         if (this.strategy) {
-            this.strategy.open =
-                typeof target !== 'undefined' ? target : !this.open;
+            this.strategy.open = this.open;
         }
     }
 
@@ -315,6 +318,7 @@ export class PickerBase extends SizedMixin(Focusable, { noDefaultSize: true }) {
             return;
         }
         if (this.strategy) {
+            this.open = false;
             this.strategy.open = false;
         }
     }
@@ -456,6 +460,9 @@ export class PickerBase extends SizedMixin(Focusable, { noDefaultSize: true }) {
     };
 
     protected renderOverlay(menu: TemplateResult): TemplateResult {
+        if (this.strategy?.overlay === undefined) {
+            return menu;
+        }
         const container = this.renderContainer(menu);
         render(container, this.strategy?.overlay as unknown as HTMLElement, {
             host: this,
@@ -517,11 +524,13 @@ export class PickerBase extends SizedMixin(Focusable, { noDefaultSize: true }) {
         }
         if (changes.has('disabled') && this.disabled) {
             if (this.strategy) {
+                this.open = false;
                 this.strategy.open = false;
             }
         }
         if (changes.has('pending') && this.pending) {
             if (this.strategy) {
+                this.open = false;
                 this.strategy.open = false;
             }
         }
@@ -574,6 +583,13 @@ export class PickerBase extends SizedMixin(Focusable, { noDefaultSize: true }) {
         this.button.addEventListener('keydown', this.handleKeydown);
     }
 
+    protected override updated(changes: PropertyValues<this>): void {
+        super.updated(changes);
+        if (changes.has('open')) {
+            this.strategy.open = this.open;
+        }
+    }
+
     protected override firstUpdated(changes: PropertyValues<this>): void {
         super.firstUpdated(changes);
         this.bindButtonKeydownListener();
@@ -652,6 +668,9 @@ export class PickerBase extends SizedMixin(Focusable, { noDefaultSize: true }) {
             this.open ||
             !!this.deprecatedMenu;
         if (this.hasRenderedOverlay) {
+            if (this.dependencyManager.loaded) {
+                this.dependencyManager.add('sp-overlay');
+            }
             return this.renderOverlay(menu);
         }
         return menu;
@@ -759,7 +778,6 @@ export class PickerBase extends SizedMixin(Focusable, { noDefaultSize: true }) {
 
     protected bindEvents(): void {
         this.strategy?.abort();
-        this.strategy = undefined;
         if (this.isMobile.matches) {
             this.strategy = new strategies['mobile'](this.button, this);
         } else {

packages/picker/test/index.ts

@@ -316,6 +316,7 @@ export function runPickerTests(): void {
             option2.innerHTML = 'Invert Selection';
             await itemUpdated;
             await elementUpdated(el);
+            await aTimeout(150);
             expect(el.value).to.equal('option-2');
             expect((el.button.textContent || '').trim()).to.include(
                 'Invert Selection'
@@ -619,6 +620,8 @@ export function runPickerTests(): void {
             expect(el.value).to.equal(thirdItem.value);
         });
         it('opens/closes multiple times', async () => {
+            await nextFrame();
+            await nextFrame();
             expect(el.open).to.be.false;
             const boundingRect = el.button.getBoundingClientRect();
             let opened = oneEvent(el, 'sp-opened');