Improved hack for focus in Dialog

closes #28

Author: mstahv

src/main/java/org/vaadin/tinymce/TinyMce.java

@@ -241,10 +241,8 @@ public void focus() {
                     // Dialog has timing issues...
                     getElement().executeJs("""
                         const el = this;
-                        const isInShadowRoot = document.body.contains(el);
-                        if(isInShadowRoot) {
+                        if(el.$connector.isInDialog()) {
                             setTimeout(() => {
-                                debugger;
                                 el.$connector.focus()
                             }, 150);
                         } else {

src/main/resources/META-INF/resources/frontend/tinymceConnector.js

@@ -34,8 +34,19 @@ window.Vaadin.Flow.tinymceConnector = {
               readonlyTimeout = setTimeout(() => {
                 this.editor.mode.set(enabled ? 'design' : 'readonly');
               }, 20);
+            },
+            isInDialog: function() {
+                let inDialog = false;
+                let parent = c.parentElement;
+                while(parent != null) {
+                    if(parent.tagName.toLowerCase().indexOf("vaadin-dialog") == 0) {
+                        inDialog = true;
+                        break;
+                    }
+                    parent = parent.parentElement;
+                }
+                return inDialog;
             }
-                  
           };
         }
 
@@ -83,6 +94,18 @@ window.Vaadin.Flow.tinymceConnector = {
             c.dispatchEvent(event);
           });
 
+          if(c.$connector.isInDialog()) {
+              // This is inside a shadowroot (Dialog in Vaadin)
+              // and needs some hacks to make this nagigateable with keyboard
+              if(!c.tabIndex) {
+                  // make the wrapping element also focusable
+                  c.setAttribute("tabindex", 0);
+              }
+              // on focus to wrapping element, pass forward to editor
+              c.addEventListener("focus", e=> {
+                ed.focus();
+              });
+          }
         };
 
         ta.innerHTML = initialContent;

src/test/java/org/vaadin/tinymce/PreserveOnRefreshBug27.java

@@ -16,7 +16,6 @@ public class PreserveOnRefreshBug27 extends VerticalLayout {
     public PreserveOnRefreshBug27() {
         Dialog dialog = new Dialog();
         TinyMce tinyMce = new TinyMce();
-        tinyMce.setTabIndex(1);
         tinyMce.configure("branding", false);
         tinyMce.configure("statusbar", false);
         tinyMce.setValue("<h2>Hallo Leute,</h2>");