Repository: ionic-team/ionic-framework
File: core/src/components/modal/modal.tsx (TypeScript)

Code before:
    }
  };

  /**
   * When the modal receives focus directly, pass focus to the handle
   * if it exists and is focusable, otherwise let the focus trap handle it.
   */
  private onModalFocus = (ev: FocusEvent) => {
    const { dragHandleEl, el } = this;
    // Only handle focus if the modal itself was focused (not a child element)
    if (ev.target === el && dragHandleEl && dragHandleEl.tabIndex !== -1) {
      dragHandleEl.focus();
    }
  };

  private initViewTransitionListener() {
    // Only enable for iOS card modals when no custom animations are provided
    if (getIonMode(this) !== 'ios' || !this.presentingElement || this.enterAnimation || this.leaveAnimation) {
      return;
    }

    // Set initial view state
    this.currentViewIsPortrait = window.innerWidth < 768;

    // Create debounced resize handler
    this.resizeListener = () => {
      clearTimeout(this.resizeTimeout);
      this.resizeTimeout = setTimeout(() => {
        this.handleViewTransition();
      }, 50); // Debounce to avoid excessive calls during active resizing
    };

    window.addEventListener('resize', this.resizeListener);
  }

  private handleViewTransition() {
    const isPortrait = window.innerWidth < 768;

    // Only transition if view state actually changed
    if (this.currentViewIsPortrait === isPortrait) {
      return;
    }

    // Cancel any ongoing transition animation
    if (this.viewTransitionAnimation) {
      this.viewTransitionAnimation.destroy();
      this.viewTransitionAnimation = undefined;
    }

    const { presentingElement } = this;
    if (!presentingElement) {

Review comment (suggestion):
Why did we go with this over:

```
@Listen('resize', { target: 'window' })
```

See content & col components

Code after:
  };

  private onLifecycle = (modalEvent: CustomEvent) => {
    const el = this.usersElement;
    const name = LIFECYCLE_MAP[modalEvent.type];
    if (el && name) {
      const ev = new CustomEvent(name, {
        bubbles: false,
        cancelable: false,
        detail: modalEvent.detail,
      });
      el.dispatchEvent(ev);
    }
  };

  /**
   * When the modal receives focus directly, pass focus to the handle
   * if it exists and is focusable, otherwise let the focus trap handle it.
   */
  private onModalFocus = (ev: FocusEvent) => {
    const { dragHandleEl, el } = this;
    // Only handle focus if the modal itself was focused (not a child element)
    if (ev.target === el && dragHandleEl && dragHandleEl.tabIndex !== -1) {
      dragHandleEl.focus();
    }
  };

  private initViewTransitionListener() {
    // Only enable for iOS card modals when no custom animations are provided
    if (getIonMode(this) !== 'ios' || !this.presentingElement || this.enterAnimation || this.leaveAnimation) {
      return;
    }

    // Set initial view state
    this.currentViewIsPortrait = window.innerWidth < 768;
  }

  private handleViewTransition() {
    const isPortrait = window.innerWidth < 768;

    // Only transition if view state actually changed
    if (this.currentViewIsPortrait === isPortrait) {
      return;
    }

    // Cancel any ongoing transition animation
    if (this.viewTransitionAnimation) {
      this.viewTransitionAnimation.destroy();
      this.viewTransitionAnimation = undefined;
    }