fix(picker): ensure menu placement in mobile (#3835)

* chore(picker): fix for overlaid picker in mobile

* chore: updated golden image cache

* chore(picker): fix for overlaid picker in mobile

* chore: updated golden image cache

* chore(picker): added property for type

* chore(picker): added type as a property

* chore(picker): removing overlay type as a property

* chore(picker): added triiger open decorator for custom picker

* chore(picker): reverting golden hash

---------

Co-authored-by: Rajdeep Chandra <rajdeepc@adobe.com>

Author: 2 people

packages/picker/src/Picker.ts

@@ -393,7 +393,7 @@ export class PickerBase extends SizedMixin(Focusable, { noDefaultSize: true }) {
                 .offset=${0}
                 ?open=${this.open}
                 .placement=${this.isMobile.matches ? undefined : this.placement}
-                type="auto"
+                .type=${this.isMobile.matches ? 'modal' : 'auto'}
                 .receivesFocus=${'true'}
                 @beforetoggle=${(
                     event: Event & {

packages/picker/stories/picker.stories.ts

@@ -459,6 +459,58 @@ export const readonly = (args: StoryArgs): TemplateResult => {
     `;
 };
 
+function nextFrame(): Promise<void> {
+    return new Promise((res) => requestAnimationFrame(() => res()));
+}
+
+class CustomPickerReady extends HTMLElement {
+    ready!: (value: boolean | PromiseLike<boolean>) => void;
+
+    constructor() {
+        super();
+        this.readyPromise = new Promise((res) => {
+            this.ready = res;
+            this.setup();
+        });
+    }
+
+    async setup(): Promise<void> {
+        await nextFrame();
+    }
+
+    handleTriggerOpened = async (): Promise<void> => {
+        await nextFrame();
+
+        const picker = document.querySelector('#picker-state') as Picker;
+        picker.addEventListener('sp-opened', this.handlePickerOpen);
+        picker.open = true;
+    };
+
+    handlePickerOpen = async (): Promise<void> => {
+        const picker = document.querySelector('#picker-state') as Picker;
+        const actions = [nextFrame, picker.updateComplete];
+
+        await Promise.all(actions);
+
+        this.ready(true);
+    };
+
+    private readyPromise: Promise<boolean> = Promise.resolve(false);
+
+    get updateComplete(): Promise<boolean> {
+        return this.readyPromise;
+    }
+}
+
+customElements.define('complex-picker-ready', CustomPickerReady);
+
+const customPickerDecorator = (story: () => TemplateResult): TemplateResult => {
+    return html`
+        ${story()}
+        <custom-picker-ready></custom-picker-ready>
+    `;
+};
+
 export const custom = (args: StoryArgs): TemplateResult => {
     const initialState = 'lb1-mo';
     return html`
@@ -495,6 +547,8 @@ export const custom = (args: StoryArgs): TemplateResult => {
     `;
 };
 
+custom.decorators = [customPickerDecorator];
+
 custom.args = {
     open: true,
 };