Dispatch Blur Event with multi froala editors in same view (AngularJS)

[cesarlarsson]

Expected behavior.

When the user move around each of the froala's editor the blur method should call all the time that the previous editor lost focus

Actual behavior.

In the video you can see that when you move around the different editor (without clicking outside the document, so click from editor to editor) sometimes the blur event is not firing

Steps to reproduce the problem.

` // add the module with global defaults for froala var myApp = angular.module('myApp', ['froala']). value('froalaConfig', { toolbarInline: false, placeholderText: 'Edit Your Content Here!' });

// create the controller and inject Angular's $scope
myApp.controller('mainController', function($scope,$timeout) {
    let mainEditor, mainEditor2, mainEditor3, mainEditor4, mainEditor5, mainEditor6;
    let vm = this;

    let baseConfiguration = {
        key: 'XXXXX',
        toolbarButtons: {
            'moreText': {
                'buttons': ['bold', 'italic', 'underline', 'fontFamily', 'fontSize', 'textColor', 'inlineClass', 'inlineStyle', 'clearFormatting']
            },
            'moreParagraph': {
                'buttons': ['alignLeft', 'alignCenter', 'formatOLSimple', 'alignRight', 'alignJustify', 'formatOL', 'formatUL', 'paragraphFormat', 'paragraphStyle', 'lineHeight', 'outdent', 'indent', 'quote']
            },
            'moreRich': {
                'buttons': ['insertLink', 'insertTable', 'emoticons', 'fontAwesome', 'specialCharacters', 'embedly', 'insertHR']
            },
            'moreMisc': {
                'buttons': ['undo', 'redo', 'fullscreen', 'selectAll', 'modalEdit'],
                'align': 'right'
            }
        },
        pluginsEnabled: ['align', 'colors', 'embedly', 'emoticons', 'fontAwesome', 'fontFamily', 'fontSize', 'inlineStyle', 'inlineClass', 'lineBreaker', 'lineHeight', 'link', 'lists', 'paragraphFormat', 'paragraphStyle', 'table', 'wordPaste', 'specialCharacters'],

        inlineClasses: {
            'fr-class-highlighted': 'Highlighted'
        },
        emoticonsUseImage: false,
        events: {},
        attribution: false
    };

    let baseEvents = {
        'blur': function () {
            vm.value = this.html.get(false);
            console.log('lost focus froala');
        }
    };

    vm.froalaOptions = angular.copy(baseConfiguration);

    vm.froalaOptions.events = angular.extend(vm.froalaOptions.events,baseEvents);

    vm.$onInit = function() {
        FroalaEditor.DefineIcon('modalEdit', {NAME: 'expand'});
        FroalaEditor.RegisterCommand('modalEdit', {
            title: 'Fullscreen',
            icon: 'fullscreen',
            focus: true,
            undo: true,
            refreshAfterCallback: true,
            callback: function () {
                this.openFullScreen();
            }
        });

        $timeout(function(){
            mainEditor1 = new FroalaEditor('#editor1', vm.froalaOptions, function(){
            });
            mainEditor2 = new FroalaEditor('#editor2', vm.froalaOptions, function(){
            });
            mainEditor3 = new FroalaEditor('#editor3', vm.froalaOptions, function(){
            });
            mainEditor4 = new FroalaEditor('#editor4', vm.froalaOptions, function(){
            });
            mainEditor5 = new FroalaEditor('#editor5', vm.froalaOptions, function(){
            });
        });
    }
});

`

The HTML

`

Angular Blur Test

When you have multiples Froala editor and you move between the editors the froala blur events not fire always

`

Editor version.

V3.0.2

OS.

Windows 10

Browser.

Tested on Chrome 75

Recording.

(A recording showing how to reproduce the problem) The console log print the message when the blur event is call

[casualuser]

Hello, We tried to reproduce the issue locally but with no luck. It is not completely clear about lib versions and markup. Can you please reproduce the issue with froala 3.0.3 and jsfiddle.com or stackblitz.com to let us investigate it.

[KeanuFerreira]

Hi, i have the same Problem with the Editor. Here is a jsfiddle to recreate it. The same Thing happens with the focus event.