feat(picker): add ability to use picker inline (#26336)

angular/src/directives/proxies-list.ts

@@ -53,6 +53,7 @@ export const DIRECTIVES = [
   d.IonNav,
   d.IonNavLink,
   d.IonNote,
+  d.IonPicker,
   d.IonProgressBar,
   d.IonRadio,
   d.IonRadioGroup,

angular/src/directives/proxies.ts

@@ -1418,6 +1418,67 @@ export class IonNote {
   }
 }
 
+import type { OverlayEventDetail as IPickerOverlayEventDetail } from '@ionic/core';
+export declare interface IonPicker extends Components.IonPicker {
+  /**
+   * Emitted after the picker has presented. 
+   */
+  ionPickerDidPresent: EventEmitter<CustomEvent<void>>;
+  /**
+   * Emitted before the picker has presented. 
+   */
+  ionPickerWillPresent: EventEmitter<CustomEvent<void>>;
+  /**
+   * Emitted before the picker has dismissed. 
+   */
+  ionPickerWillDismiss: EventEmitter<CustomEvent<IPickerOverlayEventDetail>>;
+  /**
+   * Emitted after the picker has dismissed. 
+   */
+  ionPickerDidDismiss: EventEmitter<CustomEvent<IPickerOverlayEventDetail>>;
+  /**
+   * Emitted after the picker has presented.
+Shorthand for ionPickerWillDismiss. 
+   */
+  didPresent: EventEmitter<CustomEvent<void>>;
+  /**
+   * Emitted before the picker has presented.
+Shorthand for ionPickerWillPresent. 
+   */
+  willPresent: EventEmitter<CustomEvent<void>>;
+  /**
+   * Emitted before the picker has dismissed.
+Shorthand for ionPickerWillDismiss. 
+   */
+  willDismiss: EventEmitter<CustomEvent<IPickerOverlayEventDetail>>;
+  /**
+   * Emitted after the picker has dismissed.
+Shorthand for ionPickerDidDismiss. 
+   */
+  didDismiss: EventEmitter<CustomEvent<IPickerOverlayEventDetail>>;
+
+}
+
+@ProxyCmp({
+  defineCustomElementFn: undefined,
+  inputs: ['animated', 'backdropDismiss', 'buttons', 'columns', 'cssClass', 'duration', 'enterAnimation', 'htmlAttributes', 'isOpen', 'keyboardClose', 'leaveAnimation', 'mode', 'showBackdrop', 'trigger'],
+  methods: ['present', 'dismiss', 'onDidDismiss', 'onWillDismiss', 'getColumn']
+})
+@Component({
+  selector: 'ion-picker',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  inputs: ['animated', 'backdropDismiss', 'buttons', 'columns', 'cssClass', 'duration', 'enterAnimation', 'htmlAttributes', 'isOpen', 'keyboardClose', 'leaveAnimation', 'mode', 'showBackdrop', 'trigger']
+})
+export class IonPicker {
+  protected el: HTMLElement;
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+    proxyOutputs(this, this.el, ['ionPickerDidPresent', 'ionPickerWillPresent', 'ionPickerWillDismiss', 'ionPickerDidDismiss', 'didPresent', 'willPresent', 'willDismiss', 'didDismiss']);
+  }
+}
+
 
 export declare interface IonProgressBar extends Components.IonProgressBar {}
 

angular/test/base/src/app/overlays-inline/overlays-inline.component.html

@@ -3,6 +3,7 @@
   <ion-button id="open-action-sheet">Open Action Sheet</ion-button>
   <ion-button id="open-loading">Open Loading</ion-button>
   <ion-button id="open-toast">Open Toast</ion-button>
+  <ion-button id="open-picker">Open Picker</ion-button>
 
   <ion-alert
     trigger="open-alert"
@@ -30,4 +31,10 @@
     message="This is a toast message"
     [buttons]="['Button']"
   ></ion-toast>
+
+  <ion-picker
+    trigger="open-picker"
+    [columns]="pickerColumns"
+    [buttons]="pickerButtons"
+  ></ion-picker>
 </ion-content>

angular/test/base/src/app/overlays-inline/overlays-inline.component.ts

@@ -7,4 +7,25 @@ import { Component } from "@angular/core";
   selector: 'app-overlays-inline',
   templateUrl: 'overlays-inline.component.html'
 })
-export class OverlaysInlineComponent {}
+export class OverlaysInlineComponent {
+  public pickerButtons = [{ text: 'Ok' }, { text: 'Cancel', role: 'cancel' }];
+  public pickerColumns = [
+    {
+      name: 'Colors',
+      options: [
+        {
+          text: 'Red',
+          value: 'red',
+        },
+        {
+          text: 'Blue',
+          value: 'blue',
+        },
+        {
+          text: 'Green',
+          value: 'green',
+        },
+      ],
+    },
+  ];
+}

core/api.txt

@@ -900,19 +900,25 @@ ion-picker,prop,cssClass,string | string[] | undefined,undefined,false,false
 ion-picker,prop,duration,number,0,false,false
 ion-picker,prop,enterAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
 ion-picker,prop,htmlAttributes,undefined | { [key: string]: any; },undefined,false,false
+ion-picker,prop,isOpen,boolean,false,false,false
 ion-picker,prop,keyboardClose,boolean,true,false,false
 ion-picker,prop,leaveAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
 ion-picker,prop,mode,"ios" | "md",undefined,false,false
 ion-picker,prop,showBackdrop,boolean,true,false,false
+ion-picker,prop,trigger,string | undefined,undefined,false,false
 ion-picker,method,dismiss,dismiss(data?: any, role?: string) => Promise<boolean>
 ion-picker,method,getColumn,getColumn(name: string) => Promise<PickerColumn | undefined>
 ion-picker,method,onDidDismiss,onDidDismiss<T = any>() => Promise<OverlayEventDetail<T>>
 ion-picker,method,onWillDismiss,onWillDismiss<T = any>() => Promise<OverlayEventDetail<T>>
 ion-picker,method,present,present() => Promise<void>
+ion-picker,event,didDismiss,OverlayEventDetail<any>,true
+ion-picker,event,didPresent,void,true
 ion-picker,event,ionPickerDidDismiss,OverlayEventDetail<any>,true
 ion-picker,event,ionPickerDidPresent,void,true
 ion-picker,event,ionPickerWillDismiss,OverlayEventDetail<any>,true
 ion-picker,event,ionPickerWillPresent,void,true
+ion-picker,event,willDismiss,OverlayEventDetail<any>,true
+ion-picker,event,willPresent,void,true
 ion-picker,css-prop,--backdrop-opacity
 ion-picker,css-prop,--background
 ion-picker,css-prop,--background-rgb

core/src/components.d.ts

@@ -1883,6 +1883,7 @@ export namespace Components {
           * Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.
          */
         "cssClass"?: string | string[];
+        "delegate"?: FrameworkDelegate;
         /**
           * Dismiss the picker overlay after it has been presented.
           * @param data Any data to emit in the dismiss events.
@@ -1902,10 +1903,15 @@ export namespace Components {
           * @param name The name of the column.
          */
         "getColumn": (name: string) => Promise<PickerColumn | undefined>;
+        "hasController": boolean;
         /**
           * Additional attributes to pass to the picker.
          */
         "htmlAttributes"?: { [key: string]: any };
+        /**
+          * If `true`, the picker will open. If `false`, the picker will close. Use this if you need finer grained control over presentation, otherwise just use the pickerController or the `trigger` property. Note: `isOpen` will not automatically be set back to `false` when the picker dismisses. You will need to do that in your code.
+         */
+        "isOpen": boolean;
         /**
           * If `true`, the keyboard will be automatically dismissed when the overlay is presented.
          */
@@ -1935,6 +1941,10 @@ export namespace Components {
           * If `true`, a backdrop will be displayed behind the picker.
          */
         "showBackdrop": boolean;
+        /**
+          * An ID corresponding to the trigger element that causes the picker to open when clicked.
+         */
+        "trigger": string | undefined;
     }
     interface IonPickerColumn {
         /**
@@ -5720,6 +5730,7 @@ declare namespace LocalJSX {
           * Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.
          */
         "cssClass"?: string | string[];
+        "delegate"?: FrameworkDelegate;
         /**
           * Number of milliseconds to wait before dismissing the picker.
          */
@@ -5728,10 +5739,15 @@ declare namespace LocalJSX {
           * Animation to use when the picker is presented.
          */
         "enterAnimation"?: AnimationBuilder;
+        "hasController"?: boolean;
         /**
           * Additional attributes to pass to the picker.
          */
         "htmlAttributes"?: { [key: string]: any };
+        /**
+          * If `true`, the picker will open. If `false`, the picker will close. Use this if you need finer grained control over presentation, otherwise just use the pickerController or the `trigger` property. Note: `isOpen` will not automatically be set back to `false` when the picker dismisses. You will need to do that in your code.
+         */
+        "isOpen"?: boolean;
         /**
           * If `true`, the keyboard will be automatically dismissed when the overlay is presented.
          */
@@ -5744,6 +5760,14 @@ declare namespace LocalJSX {
           * The mode determines which platform styles to use.
          */
         "mode"?: "ios" | "md";
+        /**
+          * Emitted after the picker has dismissed. Shorthand for ionPickerDidDismiss.
+         */
+        "onDidDismiss"?: (event: IonPickerCustomEvent<OverlayEventDetail>) => void;
+        /**
+          * Emitted after the picker has presented. Shorthand for ionPickerWillDismiss.
+         */
+        "onDidPresent"?: (event: IonPickerCustomEvent<void>) => void;
         /**
           * Emitted after the picker has dismissed.
          */
@@ -5760,11 +5784,23 @@ declare namespace LocalJSX {
           * Emitted before the picker has presented.
          */
         "onIonPickerWillPresent"?: (event: IonPickerCustomEvent<void>) => void;
+        /**
+          * Emitted before the picker has dismissed. Shorthand for ionPickerWillDismiss.
+         */
+        "onWillDismiss"?: (event: IonPickerCustomEvent<OverlayEventDetail>) => void;
+        /**
+          * Emitted before the picker has presented. Shorthand for ionPickerWillPresent.
+         */
+        "onWillPresent"?: (event: IonPickerCustomEvent<void>) => void;
         "overlayIndex": number;
         /**
           * If `true`, a backdrop will be displayed behind the picker.
          */
         "showBackdrop"?: boolean;
+        /**
+          * An ID corresponding to the trigger element that causes the picker to open when clicked.
+         */
+        "trigger"?: string | undefined;
     }
     interface IonPickerColumn {
         /**

core/src/components/picker-column/picker-column.tsx

@@ -171,14 +171,16 @@ export class PickerColumnCmp implements ComponentInterface {
       }
       button.style.transform = transform;
 
-      // Update selected item
-      if (selected !== opt.selected) {
-        opt.selected = selected;
-        if (selected) {
-          button.classList.add(PICKER_OPT_SELECTED);
-        } else {
-          button.classList.remove(PICKER_OPT_SELECTED);
-        }
+      /**
+       * Ensure that the select column
+       * item has the selected class
+       */
+      opt.selected = selected;
+
+      if (selected) {
+        button.classList.add(PICKER_OPT_SELECTED);
+      } else {
+        button.classList.remove(PICKER_OPT_SELECTED);
       }
     }
     this.col.prevSelected = selectedIndex;

core/src/components/picker/picker.tsx

@@ -1,5 +1,5 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
-import { Component, Element, Event, Host, Method, Prop, State, h } from '@stencil/core';
+import { Component, Element, Event, Host, Method, Prop, State, Watch, h } from '@stencil/core';
 
 import { getIonMode } from '../../global/ionic-global';
 import type {
@@ -9,8 +9,19 @@ import type {
   OverlayInterface,
   PickerButton,
   PickerColumn,
+  FrameworkDelegate,
 } from '../../interface';
-import { BACKDROP, dismiss, eventMethod, isCancel, prepareOverlay, present, safeCall } from '../../utils/overlays';
+import {
+  createDelegateController,
+  createTriggerController,
+  BACKDROP,
+  dismiss,
+  eventMethod,
+  isCancel,
+  prepareOverlay,
+  present,
+  safeCall,
+} from '../../utils/overlays';
 import { getClassMap } from '../../utils/theme';
 
 import { iosEnterAnimation } from './animations/ios.enter';
@@ -28,7 +39,11 @@ import { iosLeaveAnimation } from './animations/ios.leave';
   scoped: true,
 })
 export class Picker implements ComponentInterface, OverlayInterface {
+  private readonly delegateController = createDelegateController(this);
+  private readonly triggerController = createTriggerController();
+
   private durationTimeout: any;
+  private currentTransition?: Promise<any>;
   lastFocus?: HTMLElement;
 
   @Element() el!: HTMLIonPickerElement;
@@ -38,6 +53,12 @@ export class Picker implements ComponentInterface, OverlayInterface {
   /** @internal */
   @Prop() overlayIndex!: number;
 
+  /** @internal */
+  @Prop() delegate?: FrameworkDelegate;
+
+  /** @internal */
+  @Prop() hasController = false;
+
   /**
    * If `true`, the keyboard will be automatically dismissed when the overlay is presented.
    */
@@ -94,6 +115,36 @@ export class Picker implements ComponentInterface, OverlayInterface {
    */
   @Prop() htmlAttributes?: { [key: string]: any };
 
+  /**
+   * If `true`, the picker will open. If `false`, the picker will close.
+   * Use this if you need finer grained control over presentation, otherwise
+   * just use the pickerController or the `trigger` property.
+   * Note: `isOpen` will not automatically be set back to `false` when
+   * the picker dismisses. You will need to do that in your code.
+   */
+  @Prop() isOpen = false;
+  @Watch('isOpen')
+  onIsOpenChange(newValue: boolean, oldValue: boolean) {
+    if (newValue === true && oldValue === false) {
+      this.present();
+    } else if (newValue === false && oldValue === true) {
+      this.dismiss();
+    }
+  }
+
+  /**
+   * An ID corresponding to the trigger element that
+   * causes the picker to open when clicked.
+   */
+  @Prop() trigger: string | undefined;
+  @Watch('trigger')
+  triggerChanged() {
+    const { trigger, el, triggerController } = this;
+    if (trigger) {
+      triggerController.addClickListener(el, trigger);
+    }
+  }
+
   /**
    * Emitted after the picker has presented.
    */
@@ -114,8 +165,37 @@ export class Picker implements ComponentInterface, OverlayInterface {
    */
   @Event({ eventName: 'ionPickerDidDismiss' }) didDismiss!: EventEmitter<OverlayEventDetail>;
 
+  /**
+   * Emitted after the picker has presented.
+   * Shorthand for ionPickerWillDismiss.
+   */
+  @Event({ eventName: 'didPresent' }) didPresentShorthand!: EventEmitter<void>;
+
+  /**
+   * Emitted before the picker has presented.
+   * Shorthand for ionPickerWillPresent.
+   */
+  @Event({ eventName: 'willPresent' }) willPresentShorthand!: EventEmitter<void>;
+
+  /**
+   * Emitted before the picker has dismissed.
+   * Shorthand for ionPickerWillDismiss.
+   */
+  @Event({ eventName: 'willDismiss' }) willDismissShorthand!: EventEmitter<OverlayEventDetail>;
+
+  /**
+   * Emitted after the picker has dismissed.
+   * Shorthand for ionPickerDidDismiss.
+   */
+  @Event({ eventName: 'didDismiss' }) didDismissShorthand!: EventEmitter<OverlayEventDetail>;
+
   connectedCallback() {
     prepareOverlay(this.el);
+    this.triggerChanged();
+  }
+
+  disconnectedCallback() {
+    this.triggerController.removeClickListener();
   }
 
   /**
@@ -123,7 +203,25 @@ export class Picker implements ComponentInterface, OverlayInterface {
    */
   @Method()
   async present(): Promise<void> {
-    await present(this, 'pickerEnter', iosEnterAnimation, iosEnterAnimation, undefined);
+    /**
+     * When using an inline picker
+     * and dismissing an picker it is possible to
+     * quickly present the picker while it is
+     * dismissing. We need to await any current
+     * transition to allow the dismiss to finish
+     * before presenting again.
+     */
+    if (this.currentTransition !== undefined) {
+      await this.currentTransition;
+    }
+
+    await this.delegateController.attachViewToDom();
+
+    this.currentTransition = present(this, 'pickerEnter', iosEnterAnimation, iosEnterAnimation, undefined);
+
+    await this.currentTransition;
+
+    this.currentTransition = undefined;
 
     if (this.duration > 0) {
       this.durationTimeout = setTimeout(() => this.dismiss(), this.duration);
@@ -140,11 +238,18 @@ export class Picker implements ComponentInterface, OverlayInterface {
    * Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
    */
   @Method()
-  dismiss(data?: any, role?: string): Promise<boolean> {
+  async dismiss(data?: any, role?: string): Promise<boolean> {
     if (this.durationTimeout) {
       clearTimeout(this.durationTimeout);
     }
-    return dismiss(this, data, role, 'pickerLeave', iosLeaveAnimation, iosLeaveAnimation);
+    this.currentTransition = dismiss(this, data, role, 'pickerLeave', iosLeaveAnimation, iosLeaveAnimation);
+    const dismissed = await this.currentTransition;
+
+    if (dismissed) {
+      this.delegateController.removeViewFromDom();
+    }
+
+    return dismissed;
   }
 
   /**

core/src/components/picker/test/isOpen/index.html

@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Picker - isOpen</title>
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
+    />
+    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
+    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
+    <script src="../../../../../scripts/testing/scripts.js"></script>
+    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Picker - isOpen</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content class="ion-padding">
+        <ion-button id="default" onclick="openPicker()">Open Picker</ion-button>
+        <ion-button id="timeout" onclick="openPicker(500)">Open Picker, Close After 500ms</ion-button>
+
+        <ion-picker></ion-picker>
+      </ion-content>
+    </ion-app>
+
+    <script>
+      const picker = document.querySelector('ion-picker');
+      picker.buttons = [{ text: 'Ok' }, { text: 'Cancel', role: 'cancel' }];
+      picker.columns = [
+        {
+          name: 'Colors',
+          options: [
+            {
+              text: 'Red',
+              value: 'red',
+            },
+            {
+              text: 'Blue',
+              value: 'blue',
+            },
+            {
+              text: 'Green',
+              value: 'green',
+            },
+          ],
+        },
+      ];
+
+      const openPicker = (timeout) => {
+        picker.isOpen = true;
+
+        if (timeout) {
+          setTimeout(() => {
+            picker.isOpen = false;
+          }, timeout);
+        }
+      };
+
+      picker.addEventListener('ionPickerDidDismiss', () => {
+        picker.isOpen = false;
+      });
+    </script>
+  </body>
+</html>

core/src/components/picker/test/isOpen/picker.e2e.ts

@@ -0,0 +1,30 @@
+import { test } from '@utils/test/playwright';
+
+test.describe('picker: isOpen', () => {
+  test.beforeEach(async ({ page, skip }) => {
+    skip.rtl('isOpen does not behave differently in RTL');
+    skip.mode('md', 'isOpen does not behave differently in MD');
+    await page.goto('/src/components/picker/test/isOpen');
+  });
+
+  test('should open the picker', async ({ page }) => {
+    const ionPickerDidPresent = await page.spyOnEvent('ionPickerDidPresent');
+    await page.click('#default');
+
+    await ionPickerDidPresent.next();
+    await page.waitForSelector('ion-picker', { state: 'visible' });
+  });
+
+  test('should open the picker then close after a timeout', async ({ page }) => {
+    const ionPickerDidPresent = await page.spyOnEvent('ionPickerDidPresent');
+    const ionPickerDidDismiss = await page.spyOnEvent('ionPickerDidDismiss');
+    await page.click('#timeout');
+
+    await ionPickerDidPresent.next();
+    await page.waitForSelector('ion-picker', { state: 'visible' });
+
+    await ionPickerDidDismiss.next();
+
+    await page.waitForSelector('ion-picker', { state: 'hidden' });
+  });
+});

core/src/components/picker/test/trigger/index.html

@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Picker - Trigger</title>
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
+    />
+    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
+    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
+    <script src="../../../../../scripts/testing/scripts.js"></script>
+    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Picker - Trigger</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content class="ion-padding">
+        <ion-button id="default">Open Picker</ion-button>
+        <ion-button id="timeout">Open Picker, Close After 500ms</ion-button>
+
+        <ion-picker id="default-picker" trigger="default" header="Picker" message="Hello World!"></ion-picker>
+        <ion-picker id="timeout-picker" trigger="timeout" header="Picker" message="Hello World!"></ion-picker>
+      </ion-content>
+    </ion-app>
+
+    <script>
+      const defaultPicker = document.querySelector('#default-picker');
+      const timeoutPicker = document.querySelector('#timeout-picker');
+
+      defaultPicker.buttons = [{ text: 'Ok' }, { text: 'Cancel', role: 'cancel' }];
+      defaultPicker.columns = [
+        {
+          name: 'Colors',
+          options: [
+            {
+              text: 'Red',
+              value: 'red',
+            },
+            {
+              text: 'Blue',
+              value: 'blue',
+            },
+            {
+              text: 'Green',
+              value: 'green',
+            },
+          ],
+        },
+      ];
+
+      timeoutPicker.buttons = [{ text: 'Ok' }, { text: 'Cancel', role: 'cancel' }];
+      timeoutPicker.columns = [
+        {
+          name: 'Colors',
+          options: [
+            {
+              text: 'Red',
+              value: 'red',
+            },
+            {
+              text: 'Blue',
+              value: 'blue',
+            },
+            {
+              text: 'Green',
+              value: 'green',
+            },
+          ],
+        },
+      ];
+
+      timeoutPicker.addEventListener('didPresent', () => {
+        setTimeout(() => {
+          timeoutPicker.dismiss();
+        }, 500);
+      });
+    </script>
+  </body>
+</html>

core/src/components/picker/test/trigger/picker.e2e.ts

@@ -0,0 +1,31 @@
+import { test } from '@utils/test/playwright';
+
+test.describe('picker: trigger', () => {
+  test.beforeEach(async ({ page, skip }) => {
+    skip.rtl('trigger does not behave differently in RTL');
+    skip.mode('md');
+    await page.goto('/src/components/picker/test/trigger');
+  });
+
+  test('should open the picker', async ({ page }) => {
+    const ionPickerDidPresent = await page.spyOnEvent('ionPickerDidPresent');
+    await page.click('#default');
+
+    await ionPickerDidPresent.next();
+    await page.waitForSelector('#default-picker', { state: 'visible' });
+  });
+
+  test('should present a previously presented picker', async ({ page }) => {
+    const ionPickerDidPresent = await page.spyOnEvent('ionPickerDidPresent');
+    const ionPickerDidDismiss = await page.spyOnEvent('ionPickerDidDismiss');
+
+    await page.click('#timeout');
+
+    await ionPickerDidDismiss.next();
+
+    await page.click('#timeout');
+
+    await ionPickerDidPresent.next();
+    await page.waitForSelector('#timeout-picker', { state: 'visible' });
+  });
+});

core/stencil.config.ts

@@ -182,9 +182,8 @@ export const config: Config = {
       directivesProxyFile: '../angular/src/directives/proxies.ts',
       directivesArrayFile: '../angular/src/directives/proxies-list.ts',
       excludeComponents: [
-        // overlays
+        // overlays that accept user components
         'ion-modal',
-        'ion-picker',
         'ion-popover',
 
         // navigation

packages/react/src/components/IonPicker.tsx

@@ -1,9 +1,9 @@
-import { PickerOptions, pickerController } from '@ionic/core/components';
+import { JSX } from '@ionic/core/components';
 import { defineCustomElement } from '@ionic/core/components/ion-picker.js';
 
-import { createControllerComponent } from './createControllerComponent';
+import { createInlineOverlayComponent } from './createInlineOverlayComponent';
 
-export const IonPicker = /*@__PURE__*/ createControllerComponent<
-  PickerOptions,
+export const IonPicker = /*@__PURE__*/ createInlineOverlayComponent<
+  JSX.IonPicker,
   HTMLIonPickerElement
->('ion-picker', pickerController, defineCustomElement);
+>('ion-picker', defineCustomElement);

packages/react/test-app/tests/e2e/specs/overlay-components/IonPicker.cy.ts

@@ -14,7 +14,7 @@ describe.skip('IonPicker', () => {
     cy.get('ion-picker').contains('Bird').click();
     cy.get('ion-picker').contains('Bike').click();
     cy.get('ion-picker button').contains('Confirm').click();
-    cy.get('ion-picker').should('not.exist');
+    cy.get('ion-picker').should('not.be.visible');
 
     //confirm value
     cy.get('div').contains('Selected Value: bird, bike');
@@ -26,6 +26,6 @@ describe.skip('IonPicker', () => {
     cy.get('ion-picker').contains('Cat');
 
     //verify picker is gone
-    cy.get('ion-picker').should('not.exist');
+    cy.get('ion-picker').should('not.be.visible');
   });
 });

packages/vue/scripts/copy-overlays.js

@@ -17,7 +17,6 @@ function generateOverlays() {
     },
     {
       tag: 'ion-picker',
-      controller: 'pickerController',
       name: 'IonPicker'
     },
     {
@@ -34,7 +33,6 @@ function generateOverlays() {
     }
   ]
 
-  let controllerImports = [];
   let componentImports = [];
   let componentDefinitions = [];
 
@@ -46,14 +44,8 @@ function generateOverlays() {
 
     componentImports.push(`import { defineCustomElement as ${defineCustomElementFn} } from '@ionic/core/components/${component.tag}.js'`);
 
-    if (component.controller) {
-      controllerImports.push(component.controller);
-    }
-
-    const controllerParam = (component.controller) ? `, ${component.controller}` : '';
-
     componentDefinitions.push(`
-export const ${component.name} = /*@__PURE__*/ defineOverlayContainer<JSX.${component.name}>('${component.tag}', ${defineCustomElementFn}, [${props.join(', ')}]${controllerParam});
+export const ${component.name} = /*@__PURE__*/ defineOverlayContainer<JSX.${component.name}>('${component.tag}', ${defineCustomElementFn}, [${props.join(', ')}]);
     `);
   });
 
@@ -64,7 +56,6 @@ export const ${component.name} = /*@__PURE__*/ defineOverlayContainer<JSX.${comp
 
 import {
   JSX,
-  ${controllerImports.join(',\n  ')},
 } from '@ionic/core/components';
 
 ${componentImports.join('\n')}

packages/vue/src/components/Overlays.ts

@@ -5,7 +5,6 @@
 
 import {
   JSX,
-  pickerController,
 } from '@ionic/core/components';
 
 import { defineCustomElement as defineIonActionSheetCustomElement } from '@ionic/core/components/ion-action-sheet.js'
@@ -24,7 +23,7 @@ export const IonAlert = /*@__PURE__*/ defineOverlayContainer<JSX.IonAlert>('ion-
     
 export const IonLoading = /*@__PURE__*/ defineOverlayContainer<JSX.IonLoading>('ion-loading', defineIonLoadingCustomElement, ['animated', 'backdropDismiss', 'cssClass', 'duration', 'enterAnimation', 'htmlAttributes', 'isOpen', 'keyboardClose', 'leaveAnimation', 'message', 'mode', 'showBackdrop', 'spinner', 'translucent', 'trigger']);
     
-export const IonPicker = /*@__PURE__*/ defineOverlayContainer<JSX.IonPicker>('ion-picker', defineIonPickerCustomElement, ['animated', 'backdropDismiss', 'buttons', 'columns', 'cssClass', 'duration', 'enterAnimation', 'htmlAttributes', 'keyboardClose', 'leaveAnimation', 'mode', 'showBackdrop'], pickerController);
+export const IonPicker = /*@__PURE__*/ defineOverlayContainer<JSX.IonPicker>('ion-picker', defineIonPickerCustomElement, ['animated', 'backdropDismiss', 'buttons', 'columns', 'cssClass', 'duration', 'enterAnimation', 'htmlAttributes', 'isOpen', 'keyboardClose', 'leaveAnimation', 'mode', 'showBackdrop', 'trigger']);
     
 export const IonToast = /*@__PURE__*/ defineOverlayContainer<JSX.IonToast>('ion-toast', defineIonToastCustomElement, ['animated', 'buttons', 'color', 'cssClass', 'duration', 'enterAnimation', 'header', 'htmlAttributes', 'icon', 'isOpen', 'keyboardClose', 'leaveAnimation', 'message', 'mode', 'position', 'translucent', 'trigger']);