Language dropdown opens but closes instantly in Firefox

[jshaptala]

Discovered that on Firefox, when the spellchecker is used inside a Froala editor that's in a bootstrap modal, the dropdown doesn't want to persist.

Sometimes it will flash open but close instantly. This behaviour only happens on Firefox, and only if the popover is on a modal. Focus is set to the Froala editor once the modal is opened, and we don't force any focus after that.

The component is then simply loaded in with the configs:

<froala v-if="showEditor" ref="froala" :tag="'textarea'" :config="froalaConfig" v-model="email.body_html"></froala>

The webspellchecker is then initialized with:

WEBSPELLCHECKER.init({
    container: this.$refs.froala.$el
});

[jshaptala]

Our developer says that actually in Chrome there is the same issue. But you see it working because Chrome handles this case differently by forcing the language selector to work despite the focus.

It is due to bootstrap modal behavior with focus under the hood to meet WCAG requirements. It traps focus inside a modal. This can be addressed by changing the state of the focus option to false during start (e.g. focus: false).

This should fix the problem with the blinking selector and other elements of WProofreader dialog while keeping its keyboard navigation. WProofreader badge and dialog supports keyboard navigation in accordance with WCAG.

Unfortunately, right now we are not able to handle this while providing support for IE11. Once we stop its support, we will be able to use the custom elements/styles standard and overcome such issues.

If you are not able / willing to consider changing focus state for modal, you can remove the selector from the Settings dialog and add it to the badge to allow your users to change the language.

enableLanguagesInBadgeButton: true,
settingsSections: ['dictionaries', 'languages', 'options'],