Fix flow-component-renderer for Chrome 72 (#5060)

Fixes #5025, vaadin/vaadin-grid-flow#502

flow-data/src/main/resources/META-INF/resources/frontend/flow-component-renderer.html

@@ -1,9 +1,9 @@
 <link rel="import" href="bower_components/polymer/polymer.html">
 
-<dom-module id="flow-component-renderer"> 
+<dom-module id="flow-component-renderer">
   <template>
-    <slot></slot> 
-  </template> 
+    <slot></slot>
+  </template>
   <script>
   class FlowComponentRenderer extends Polymer.Element {
     static get is() { return 'flow-component-renderer'; }
@@ -18,18 +18,72 @@
         '_attachRenderedComponentIfAble(appid, nodeid)'
       ]
     }
-
+
+    connectedCallback() {
+      super.connectedCallback();
+      this._runChrome72ShadowDomBugWorkaround();
+    }
+
+  /* workaround for issue vaadin/flow#5025 */
+    _runChrome72ShadowDomBugWorkaround() {
+      const userAgent = navigator.userAgent;
+      if (userAgent && userAgent.match('Chrome\/')) {
+        // example: ... Chrome/72.0.3626.96 ...
+        const majorVersionString = userAgent.split('Chrome\/')[1].split('.')[0];
+        if (majorVersionString && parseInt(majorVersionString) > 71) {
+          const debouncedNotifyResize = this._getDebouncedNotifyResizeFunction();
+
+          // if there is no notifyResize function, then just skip
+
+          if (debouncedNotifyResize) {
+            this.style.visibility = 'hidden';
+            // need to use animation frame instead of timeout or focusing won't work
+            requestAnimationFrame(() => {
+              this.style.visibility = '';
+              debouncedNotifyResize();
+            });
+          }
+        }
+      }
+    }
+
+    _getDebouncedNotifyResizeFunction() {
+      // 1. dig out the web component that might have the notifyResize function
+      let component = this.parentElement;
+      while (true) {
+        if (!component) {
+          return;
+        }
+        if (component.notifyResize) {
+          break;
+        } else {
+          component = component.parentElement;
+        }
+      }
+      // 2. assign a debounced proxy to notifyResize, if not yet there
+      if (!component._debouncedNotifyResize) {
+        component._debouncedNotifyResize = function () {
+          component.__debouncedNotifyResize =
+              Polymer.Debouncer.debounce(
+                  component.__debouncedNotifyResize, // initially undefined
+                  Polymer.Async.animationFrame,
+                  component.notifyResize);
+        }
+      }
+      return component._debouncedNotifyResize;
+    }
+
     ready(){
         super.ready();
         this.addEventListener("click", function(event){
-            if (this.firstChild && 
-                    typeof this.firstChild.click === "function" && 
+            if (this.firstChild &&
+                    typeof this.firstChild.click === "function" &&
                         event.target === this ){
                 this.firstChild.click();
             }
         });
     }
-    
+
     _asyncAttachRenderedComponentIfAble() {
       this._debouncer = Polymer.Debouncer.debounce(
         this._debouncer,
@@ -72,7 +126,7 @@
       }
       return null;
     }
-    
+
     _clear() {
       while (this.firstChild) {
         this.removeChild(this.firstChild);
@@ -82,8 +136,8 @@
     onComponentRendered(){
       // subclasses can override this method to execute custom logic on resize
     }
-    
+
   }
   window.customElements.define(FlowComponentRenderer.is, FlowComponentRenderer);
-  </script> 
+  </script>
 </dom-module>