TinyMCE loses focus on modal dialog

[ihor-shubin]

Add official TinyMCE component on a modal window.

Steps to reproduce:

• To run the example application on https://tinymce-ngbmodal-focus-issue-demo-5b9nrp.stackblitz.io ;
• To click the button "OPEN MODAL";
• To close warning message regarding free trial;
• To click on the first input to make it being in focus;
• To type some text, e.g. "Test" inside TineMCE editor window and select the text;
• To click the button "bold".

Expected result:

• "Test" style changed to bold;
• Focus is returned to the editor window.

Actual result:

• "Test" style changed to bold;
• Focus is returned to the first input.

Please note: the bug cannot be reproduced on @ng-bootstrap/ng-bootstrap 2.0.0

As I can see the problem is with focus-trap component.
Could you please help me to resolve this issue?

Library versions:
angular: 6.0.3
tinymce: 4.8.3
@tinymce/tinymce-angular: 2.3.0
@ng-bootstrap/ng-bootstrap 3.3.0

[pkozlowski-opensource]

@benouat could you PTAL if / when you've got free cycles?

[benouat]

I'll have a look asap.
First investigation leads to weird result, for example I can reproduce it on Chrome, but not Safari...
Safari is working as expected.

focustrap is the culprit here. I'll have to dive into that.

[benouat]

I can actually also reproduce it in Safari, but only when the first input contains something.

[maxokorokov]

@benouat nothing to do with the input, simpler reproduction scenario is:

• open modal → closing cross is focused
• click inside TinyMCS editor → iframe is focused
• click on bold button → closing cross is focused

It brings back focus to the last focused element before entering the iframe

[benouat]

@maxokorokov in this case I don't see any room for improvement here... The iframe is messing things around.
@igor-shubin do you know if it could be initialised without an iframe ? like using content-editable instead ?

[ihor-shubin]

@maxokorokov thank you for simplifying repro steps.

@benouat I could not find how to avoid using iframe. However, if I get rid of iframe, I will face with the styling issues. So I do not think that it can be the way of fixing the focus issue there.
In addition, I have found an example how to use focus-trap with iframes. See here: http://davidtheclark.github.io/focus-trap/demo/ Maybe it will help.

[benouat]

@igor-shubin the fix in #2798 should fix the issue. Nonetheless, looking at the documentation of TinyMCE, I found an interestingly & surprisingly outdated article that made me realise:

Pasting this code inside your modal component would also fix it with current 3.3.0 version

@HostListener('click', ['$event'])
onClick(event) {
  // Click is initiated from any of the toolbar button action
  if ((event.target as HTMLElement).closest(".mce-top-part")) {
    event.stopImmediatePropagation();
  }
}

[t-mog]

@benouat thanks, the fix with stopping event propagation works fine with 3.3.0 version. Only small update - instead of @HostBinding decorator, there should be a @HostListener.

[benouat]

🤦‍♂️You're right, I'll update the snippet right away! Thanks