Method openPopover

core/src/components/select/select.tsx:645–713

(ev: UIEvent)

  }

  private async openPopover(ev: UIEvent) {
    const { fill, labelPlacement } = this;
    const interfaceOptions = this.interfaceOptions;
    const mode = getIonMode(this);
    const showBackdrop = mode === 'md' ? false : true;
    const multiple = this.multiple;
    const value = this.value;

    let event: Event | CustomEvent = ev;
    let size = 'auto';

    const hasFloatingOrStackedLabel = labelPlacement === 'floating' || labelPlacement === 'stacked';
    /**
     * The popover should take up the full width
     * when using a fill in MD mode or if the
     * label is floating/stacked.
     */
    if (hasFloatingOrStackedLabel || (mode === 'md' && fill !== undefined)) {
      size = 'cover';

      /**
       * Otherwise the popover
       * should be positioned relative
       * to the native element.
       */
    } else {
      event = {
        ...ev,
        detail: {
          ionShadowTarget: this.nativeWrapperEl,
        },
      };
    }

    const popoverOpts: PopoverOptions = {
      mode,
      event,
      alignment: 'center',
      size,
      showBackdrop,
      ...interfaceOptions,

      component: 'ion-select-popover',
      cssClass: ['select-popover', interfaceOptions.cssClass],
      componentProps: {
        header: interfaceOptions.header,
        subHeader: interfaceOptions.subHeader,
        message: interfaceOptions.message,
        multiple,
        value,
        options: this.createOverlaySelectOptions(this.childOpts, value),
      },
    };

    /**
     * Workaround for Stencil to autodefine
     * ion-select-popover and ion-popover when
     * using Custom Elements build.