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

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