From ad18604552dc5cfffbc6fbfc0c9b55fd2a83386f Mon Sep 17 00:00:00 2001
From: "alonso.torres" <alonso.torres@kaleidos.net>
Date: Mon, 11 Oct 2021 12:15:38 +0200
Subject: [PATCH] :bug: Fix bug in firefox when a text box is inside a mask

---
 CHANGES.md                                 |  1 +
 frontend/src/app/main/ui/shapes/group.cljs | 26 +++++++++++++++-------
 2 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/CHANGES.md b/CHANGES.md
index 1ad8cea69..2d51f8099 100644
--- a/CHANGES.md
+++ b/CHANGES.md
@@ -37,6 +37,7 @@
 - Fix shift+wheel to horizontal scrolling in MacOS [#1217](https://github.com/penpot/penpot/issues/1217)
 - Fix path stroke is not working properly with high thickness [Taiga #2154](https://tree.taiga.io/project/penpot/issue/2154)
 - Fix bug with transformation operations [Taiga #2155](https://tree.taiga.io/project/penpot/issue/2155)
+- Fix bug in firefox when a text box is inside a mask [Taiga #2152](https://tree.taiga.io/project/penpot/issue/2152)
 
 ### :arrow_up: Deps updates
 
diff --git a/frontend/src/app/main/ui/shapes/group.cljs b/frontend/src/app/main/ui/shapes/group.cljs
index 2dafc7bff..49a628350 100644
--- a/frontend/src/app/main/ui/shapes/group.cljs
+++ b/frontend/src/app/main/ui/shapes/group.cljs
@@ -27,21 +27,31 @@
                              [(first childs) (rest childs)]
                              [nil childs])
 
+            ;; We need to separate mask and clip into two because a bug in Firefox
+            ;; breaks when the group has clip+mask+foreignObject
+            ;; Clip and mask separated will work in every platform
+            ;  Firefox bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1734805
+            [clip-wrapper clip-props]
+            (if masked-group?
+              ["g" (-> (obj/new)
+                       (obj/set! "clipPath" (clip-url render-id mask)))]
+              [mf/Fragment nil])
+
             [mask-wrapper mask-props]
             (if masked-group?
               ["g" (-> (obj/new)
-                       (obj/set! "clipPath" (clip-url render-id mask))
                        (obj/set! "mask"     (mask-url render-id mask)))]
               [mf/Fragment nil])]
 
-        [:> mask-wrapper mask-props
-         (when masked-group?
-           [:> render-mask #js {:frame frame :mask mask}])
+        [:> clip-wrapper clip-props
+         [:> mask-wrapper mask-props
+          (when masked-group?
+            [:> render-mask #js {:frame frame :mask mask}])
 
-         (for [item childs]
-           [:& shape-wrapper {:frame frame
-                              :shape item
-                              :key (:id item)}])]))))
+          (for [item childs]
+            [:& shape-wrapper {:frame frame
+                               :shape item
+                               :key (:id item)}])]]))))