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

Ionic Framework
4

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