Merge pull request #1992 from habx/fix/5.43/read-only-assignement

APP-23041: Assignment to read-only properties is not allowed in strict mode
habx · Aug 3, 2021 · 0e9d8dd · 0e9d8dd
2 parents c64d979 + 6e50ced
commit 0e9d8dd
Showing 1 changed file with 25 additions and 11 deletions.
diff --git a/src/TogglePanel/TogglePanel.tsx b/src/TogglePanel/TogglePanel.tsx
@@ -72,19 +72,33 @@ const InnerTogglePanel = React.forwardRef<
         return setCustomStyle(style)
       }
 
-      const modalBoundingBox = modalElement.getBoundingClientRect()
-      const triggerBoundingBox = triggerElement.getBoundingClientRect()
-
-      /*
-       * The dimensions returned by `getBoundingClientRect` take into account CSS transformations.
-       * `offsetWidth` and `offsetHeight` includes scrollbars and borders.
-       * Overriding the width and height prevents wrong placement of the panel, especially during opening transitions.
-       */
-      modalBoundingBox.width = modalElement.offsetWidth
-      modalBoundingBox.height = modalElement.offsetHeight
+      const modalBoundingRect = modalElement.getBoundingClientRect()
+      const triggerBoundingRect = triggerElement.getBoundingClientRect()
 
       setCustomStyle({
-        ...setStyle(modalBoundingBox, triggerBoundingBox),
+        ...setStyle(
+          {
+            /*
+             * The dimensions returned by `getBoundingClientRect` take into account CSS transformations.
+             * `offsetWidth` and `offsetHeight` includes scrollbars and borders.
+             * Overriding the width and height prevents wrong placement of the panel, especially during opening transitions.
+             */
+            bottom: modalBoundingRect.bottom,
+            height: modalElement.offsetHeight,
+            left: modalBoundingRect.left,
+            right: modalBoundingRect.right,
+            top: modalBoundingRect.top,
+            width: modalElement.offsetWidth,
+          },
+          {
+            bottom: triggerBoundingRect.bottom,
+            height: triggerBoundingRect.height,
+            left: triggerBoundingRect.left,
+            right: triggerBoundingRect.right,
+            top: triggerBoundingRect.top,
+            width: triggerBoundingRect.width,
+          }
+        ),
         ...style,
       })
     }, [modal.ref, setStyle, shouldRenderModal, triggerRef])