Method open

core/src/components/select/select.tsx:398–493

(event?: UIEvent)

   */
  @Method()
  async open(event?: UIEvent): Promise<any> {
    if (this.disabled || this.isExpanded) {
      return undefined;
    }
    this.isExpanded = true;
    const overlay = (this.overlay = await this.createOverlay(event));

    // Add logic to scroll selected item into view before presenting
    const scrollSelectedIntoView = () => {
      const indexOfSelected = this.childOpts.findIndex((o) => o.value === this.value);
      if (indexOfSelected > -1) {
        const selectedItem = overlay.querySelector<HTMLElement>(
          `.select-interface-option:nth-of-type(${indexOfSelected + 1})`
        );

        if (selectedItem) {
          /**
           * Browsers such as Firefox do not
           * correctly delegate focus when manually
           * focusing an element with delegatesFocus.
           * We work around this by manually focusing
           * the interactive element.
           * ion-radio and ion-checkbox are the only
           * elements that ion-select-popover uses, so
           * we only need to worry about those two components
           * when focusing.
           */
          const interactiveEl = selectedItem.querySelector<HTMLElement>('ion-radio, ion-checkbox') as
            | HTMLIonRadioElement
            | HTMLIonCheckboxElement
            | null;
          if (interactiveEl) {
            selectedItem.scrollIntoView({ block: 'nearest' });
            // Needs to be called before `focusVisibleElement` to prevent issue with focus event bubbling
            // and removing `ion-focused` style
            interactiveEl.setFocus();
          }

          focusVisibleElement(selectedItem);
        }
      } else {
        /**
         * If no value is set then focus the first enabled option.
         */
        const firstEnabledOption = overlay.querySelector<HTMLElement>(
          'ion-radio:not(.radio-disabled), ion-checkbox:not(.checkbox-disabled)'
        ) as HTMLIonRadioElement | HTMLIonCheckboxElement | null;

        if (firstEnabledOption) {
          /**
           * Focus the option for the same reason as we do above.
           *
           * Needs to be called before `focusVisibleElement` to prevent issue with focus event bubbling
           * and removing `ion-focused` style
           */
          firstEnabledOption.setFocus();

          focusVisibleElement(firstEnabledOption.closest('ion-item')!);