Ionic Version 6 (Angular) Toast now holds focus preventing inputs from being used

After upgrading to @Ionic/angular@6 when a toast is displayed it prevents focus on input elements, therefore blocking users from fully interacting with the app until the toast is dismissed. I am hoping this behavior isn’t intended as there is no mention of the change on the merge documentation.

I have tested this behavior on three projects using Ionic 6 and I have experienced the same results throughout.

The last project was the angular base ionic project that was upgraded to version 6 by the Ionic Team.

I implemented a basic toast using the code from the ionic documentation and added an ion-input tag to the app component, when the toast is presented using the OnInit function, the input can not be used until the toast is dismissed.

Downgrading the ionic base project to its previous version of Ionic (5.5.2) makes it so the input is useable when the toast is present. I also found this to be true when switching my own project back to 5.8 from 6.0.0.

4 Likes

Hi @Scryer-John, I’m facing the same issue after upgrading to @Ionic/angular@6.
What I discovered so far: my ion-input still owns the focus after displaying the toast (the CSS property “has-focus” is correctly triggered), but the caret inside the input is missing

<ion-input _ngcontent-upn-c145="" hidekeyboard="" type="text" required="" ng-reflect-type="text" ng-reflect-required="" ng-reflect-placeholder="Emplacement ?" class="sc-ion-input-md-h sc-ion-input-md-s md hydrated has-focus">
<input class="native-input sc-ion-input-md" autocapitalize="off" autocomplete="off" autocorrect="off" name="ion-input-2" placeholder="Emplacement ?" required="" spellcheck="false" type="text">
</ion-input>

I’m using a vocal recognition plugin to write instructions inside the input field. (this is a hand-free app)

I’m unable to force the focus again to my input when I create the toast, I’m forced to wait the dismiss of it.

This is not a timing problem, this is clearly link to the toasts properties when it’s presented (maybe a CSS param ?)

I hope this will be useful to understand the source of the problem.

Hi… I have the same issue with Ionic React 6. toast is blocking my input when it appears. Hope someone will give a solution for that.

I was able to fix this on @Ionic/angular@6 by adding an extra property on the .create method of the toastController injectable like the following:

const toast = await this.toastController.create({
    ...props,
    htmlAttributes: { tabindex: undefined }
});

Not sure why, but inspecting in the HTML element, the create method appends an HTML element called “ion-toast” with some css classes and attributes, one of the attributes is tabindex="-1" and if you remove it in the inspector, the input focus works as expected, so adding the previous code prevents the attribute from being added at all

1 Like

Thank you @vservin, this seems to fix the issue ! :rocket:
I will add it temporary to my project and I will look forward for a real fix from the Ionic Team :crossed_fingers:

Could to file an issue on our repo with a code reproduction? Issues · ionic-team/ionic-framework · GitHub

Indeed, the attribute tabindex="-1" is the problem.
But for some reason adding htmlAttributes: { tabindex: undefined }does not remove the attribute

So what works for me is

const toast = await this.toastController.create({
    message: 'Test'
});
toast.removeAttribute('tabindex');   <--- REMOVE ATTRIBUTE tabindex
toast.present();

Sorry for the delay, i just created the issue : bug: ion-toast steal input focus and preventing it from being used · Issue #24733 · ionic-team/ionic-framework (github.com)