appAutoFocus causes modal to freeze on presentation

[VincenzoManto]

Ionic version:
[x] 7.x
[ ] 6.x
[ ] 5.x
[ ] 4.x

on Angular

---

I'm submitting a ...
[x] bug report
[ ] feature request

---

Current behavior:
When using the appAutoFocus directive on an ion-input in the calling page (not the modal), presenting a modal using modalController.present() causes the app to freeze or become unresponsive. The issue appears to stem from the appAutoFocus directive repeatedly requesting focus for the ion-input in the calling page, leading to a conflict with the modal's lifecycle.

---

Expected behavior:
The modal should present smoothly without being affected by directives or inputs in the calling page. The appAutoFocus directive should not interfere with the modal's focus management.

---

Steps to reproduce:

1. Create a page with an ion-input using the appAutoFocus directive.
2. Add a button on the page to open a modal using modalController.
3. Present the modal.
4. Observe the app freezing or becoming unresponsive.

---

Related code:

Calling Page:

<ion-app>
  <ion-content>
    <ion-input appAutoFocus placeholder="Focus me"></ion-input>
    <ion-button expand="block" (click)="presentModal()">Open Modal</ion-button>
  </ion-content>
</ion-app>

Component Code:

import { Component } from '@angular/core';
import { ModalController } from '@ionic/angular';
import { SearchResultPage } from './search-result.page';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss'],
})
export class AppComponent {
  constructor(private modalController: ModalController) {}

  async presentModal() {
    const modal = await this.modalController.create({
      component: SearchResultPage, // the behaviour is indipendent from modal content
      backdropDismiss: false,
    });

    await modal.present();
  }
}

@Directive({
    selector: '[appAutofocus]',
})

/**
 * direttiva per impostare AutoFocus su campo di input
 */
export class AutofocusDirective implements AfterContentChecked {
    constructor(private element: IonInput) {
    }

    ngAfterContentChecked(): void {
        this.element.setFocus();
    }
}

---

Other information:
This issue can be temporarily avoided by disabling the appAutoFocus directive before presenting the modal and re-enabling it after the modal is dismissed, as shown below:

async presentModal() {
  const input = document.querySelector('ion-input[appAutoFocus]');
  if (input) {
    input.removeAttribute('appAutoFocus');
  }

  const modal = await this.modalController.create({
    component: SearchResultPage,
    backdropDismiss: false,
  });

  await modal.present();

  await modal.onDidDismiss();
  if (input) {
    input.setAttribute('appAutoFocus', '');
  }
}

It seems that the appAutoFocus directive is not paused or detached from the calling page when the modal takes focus. This leads to a conflict where both the modal and the calling page attempt to manage focus.

The appAutoFocus directive should detect when its parent component loses focus (e.g., when a modal is presented) and temporarily stop requesting focus until the parent regains visibility.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.