bug: firefox, focus event does not fire when delegating focus

[felixgeissler]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• [ ] v4.x
• [ ] v5.x
• [X] v6.x

Current Behavior

When the user clicks on an <ion-item> the focus is delegated to the first focusable element, in my case an <ion-input>. In this matter I was expecting the <ion-input> to fire with it's respective (ionFocus) event, which is unfortunatley not the case. I also tried to add a native (focus) event listener, which also does not seem to get triggered.

Expected Behavior

When the user clicks on an <ion-item> the focus should get delegated to the <ion-input>, which should then fire an (ionFocus) event.

Steps to Reproduce

See Stackblitz minimal reproduction code below.

Code Reproduction URL

https://stackblitz.com/edit/ionic6-angular13-gqcrhl?file=src/app/app.component.html

Ionic Info

Ionic:

   Ionic CLI                     : 6.16.3 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 6.0.14
   @angular-devkit/build-angular : 13.3.1
   @angular-devkit/schematics    : 13.3.1
   @angular/cli                  : 13.3.1
   @ionic/angular-toolkit        : 6.1.0

Capacitor:

   Capacitor CLI      : 3.4.3
   @capacitor/android : 3.4.3
   @capacitor/core    : 3.4.3
   @capacitor/ios     : 3.4.3

Utility:

   cordova-res : not installed globally
   native-run  : 1.5.0

System:

   NodeJS : v14.17.6 (/Users/felixgeissler/.nvm/versions/node/v14.17.6/bin/node)
   npm    : 6.14.15
   OS     : macOS Monterey

Additional Information

In my case, this is a real show stopper since I'm trying to use my <ion-input> as a focus trigger to open an <ion-datetime> in a popover and I don't want the user to enter something in the input manually. With this approach I need a hook to open the popover once the focus is delegated to the <ion-input>.

[liamdebeasi]

Thanks for the issue. What browser are you testing this in? I am testing this in Chrome and Safari. In both cases the ionFocus event is firing.

[felixgeissler]

Thanks for the issue. What browser are you testing this in? I am testing this in Chrome and Safari. In both cases the ionFocus event is firing.

I'm using Firefox Developer Edition (version 99.0b8 (64-Bit). I can indeed verify, that it works in Chrome and Safari.

[liamdebeasi]

Thanks! This looks like a Firefox bug. I will look into reporting this to the Firefox team.

[felixgeissler]

Thanks, Liam!

[liamdebeasi]

Quick update: In Ionic 8 ion-item will no longer delegate focus, so this bug should not reproduce anymore. I am going to keep this issue open because we still delegate focus with accordions, so the bug will continue to reproduce there.