bug #1130 [LiveComponent] Workaround for bad behavior with Chrome's t…

…ranslation feature (weaverryan) This PR was merged into the 2.x branch. Discussion ---------- [LiveComponent] Workaround for bad behavior with Chrome's translation feature | Q | A | ------------- | --- | Bug fix? | yes | New feature? | no | Tickets | Fix #1120 | License | MIT A bit of a hack, but works nicely locally. As `@smnandre` mentioned, Firefox and Safari are already ok, as they modify the page without triggering the MutationObserver or adding any ugly `font` tags ;). Cheers! Commits ------- 5204f83 [LiveComponent] Workaround for bad behavior with Chrome's translation feature
symfony · Sep 22, 2023 · b31d5e1 · b31d5e1
2 parents 976b53f + 5204f83
commit b31d5e1
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 0 deletions.
diff --git a/src/LiveComponent/assets/dist/Rendering/ExternalMutationTracker.d.ts b/src/LiveComponent/assets/dist/Rendering/ExternalMutationTracker.d.ts
@@ -22,4 +22,5 @@ export default class {
     private handleStyleAttributeMutation;
     private handleGenericAttributeMutation;
     private extractStyles;
+    private isElementAddedByTranslation;
 }
diff --git a/src/LiveComponent/assets/dist/live_controller.js b/src/LiveComponent/assets/dist/live_controller.js
@@ -1565,6 +1565,9 @@ class ExternalMutationTracker {
             if (!this.shouldTrackChangeCallback(element)) {
                 continue;
             }
+            if (this.isElementAddedByTranslation(element)) {
+                continue;
+            }
             let isChangeInAddedElement = false;
             for (const addedElement of this.addedElements) {
                 if (addedElement.contains(element)) {
@@ -1603,6 +1606,9 @@ class ExternalMutationTracker {
                 this.removedElements.splice(this.removedElements.indexOf(node), 1);
                 return;
             }
+            if (this.isElementAddedByTranslation(node)) {
+                return;
+            }
             this.addedElements.push(node);
         });
         mutation.removedNodes.forEach((node) => {
@@ -1711,6 +1717,9 @@ class ExternalMutationTracker {
         });
         return styleObject;
     }
+    isElementAddedByTranslation(element) {
+        return element.tagName === 'FONT' && element.getAttribute('style') === 'vertical-align: inherit;';
+    }
 }
 
 class ChildComponentWrapper {

diff --git a/src/LiveComponent/assets/src/Rendering/ExternalMutationTracker.ts b/src/LiveComponent/assets/src/Rendering/ExternalMutationTracker.ts
@@ -75,6 +75,10 @@ export default class {
                 continue;
             }
 
+            if (this.isElementAddedByTranslation(element)) {
+                continue;
+            }
+
             // ignore changes in elements that were externally-added
             let isChangeInAddedElement = false;
             for (const addedElement of this.addedElements) {
@@ -133,6 +137,10 @@ export default class {
                 return;
             }
 
+            if (this.isElementAddedByTranslation(node)) {
+                return;
+            }
+
             this.addedElements.push(node);
         });
 
@@ -293,4 +301,16 @@ export default class {
 
         return styleObject;
     }
+
+    /**
+     * Helps avoid tracking changes by Chrome's translation feature.
+     *
+     * When Chrome translates, it mutates the dom in a way that triggers MutationObserver.
+     * This includes adding new elements wrapped in a <font> tag. This causes live
+     * components to incorrectly think that these new elements should persist through
+     * re-renders, causing duplicate text.
+     */
+    private isElementAddedByTranslation(element: Element): boolean {
+        return element.tagName === 'FONT' && element.getAttribute('style') === 'vertical-align: inherit;'
+    }
 }