Class Picker

core/src/components/picker/picker.tsx:18–570

  shadow: true,
})
export class Picker implements ComponentInterface {
  private inputEl?: HTMLInputElement;
  private useInputMode = false;
  private inputModeColumn?: HTMLIonPickerColumnElement;
  private highlightEl?: HTMLElement;
  private actionOnClick?: () => void;
  private destroyKeypressListener?: () => void;
  private singleColumnSearchTimeout?: ReturnType<typeof setTimeout>;

  @Element() el!: HTMLIonPickerElement;

  /**
   * @internal
   */
  @Event() ionInputModeChange!: EventEmitter<PickerChangeEventDetail>;

  /**
   * When the picker is interacted with
   * we need to prevent touchstart so other
   * gestures do not fire. For example,
   * scrolling on the wheel picker
   * in ion-datetime should not cause
   * a card modal to swipe to close.
   */
  @Listen('touchstart')
  preventTouchStartPropagation(ev: TouchEvent) {
    ev.stopPropagation();
  }

  componentWillLoad() {
    getElementRoot(this.el).addEventListener('focusin', this.onFocusIn);
    getElementRoot(this.el).addEventListener('focusout', this.onFocusOut);
  }

  private isInHighlightBounds = (ev: PointerEvent) => {
    const { highlightEl } = this;
    if (!highlightEl) {
      return false;
    }

    const bbox = highlightEl.getBoundingClientRect();
    /**
     * Check to see if the user clicked
     * outside the bounds of the highlight.
     */
    const outsideX = ev.clientX < bbox.left || ev.clientX > bbox.right;
    const outsideY = ev.clientY < bbox.top || ev.clientY > bbox.bottom;
    if (outsideX || outsideY) {
      return false;
    }

    return true;
  };

  /**
   * If we are no longer focused
   * on a picker column, then we should
   * exit input mode. An exception is made