Fix flow-component-renderer for Chrome 72

Fixes #5025, vaadin/vaadin-grid-flow#502
vaadin · Feb 14, 2019 · ce32fd1 · ce32fd1
1 parent f267ff2
commit ce32fd1
Showing 1 changed file with 55 additions and 1 deletion.
diff --git a/flow-data/src/main/resources/META-INF/resources/frontend/flow-component-renderer.html b/flow-data/src/main/resources/META-INF/resources/frontend/flow-component-renderer.html
@@ -18,7 +18,61 @@
         '_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];
+        this.style.visibility = 'hidden';
+        if (majorVersionString && parseInt(majorVersionString) > 71) {
+
+          const debouncedNotifyResize = this._getDebouncedNotifyResizeFunction();
+
+          // if there is no notifyResize function, then just skip
+          if (debouncedNotifyResize) {
+            // 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){