How to ensure that a blur event is handled in the same way in safari, firefox and chrome for a tinymce 5 editor area?

Question

I have a tinymce 5 editing area. When the user moves away from the actual text, a "blur" event is listened for as to automatically save the text. This works well in chrome but in safari and firefox if the user try to use any of the tinymce buttons (eg underline, bold, etc) it also triggers the event. I need the save to occur ONLY when users move their mouses outside ALL tinymce components (ie UI elements and the actual text area).

The initialisation code I am use is:

 tinymce.init({
        selector: 'textarea.tinymce',
        branding: false,
        mode: 'exact',
        schema: 'html5-strict',
        element_format: 'html',
        resize: true,
        menubar: false,
        plugins: 'preview autolink link visualblocks visualchars hr nonbreaking anchor  insertdatetime lists advlist wordcount',
        toolbar: 'bold italic strikethrough forecolor backcolor | link | alignleft aligncenter alignright alignjustify  | numlist bullist outdent indent  | preview | visualblocks removeformat',
        menubar: 'file edit insert format',
        browser_spellcheck: true,
        contextmenu: false,
        init_instance_callback: function (editor) {
        editor.on('blur', function (e) {
                $("#change_to_do_list_form").submit();
          });
        }
      });

Answer 1

Well, I don't know where you are rendering your editor, but i faced this when I tried to render editor into a JQuery Ui Dialog; I didn't persist to find out a solution, I changed the way to save by calculate user last keypress and after some seconds applied save. otherwise, whenever user turned to type again before timeout, I reboot timer until user stop typing.