DOMException when using color picker inside Salesforce (iframe) about react-color

[i23098]

Can't really reproduce in there, but I did made an example at https://codesandbox.io/embed/react-color-example-59-forked-1kezj7?fontsize=14&hidenavigation=1&theme=dark

The bug is when clicking the "Done" that hides the color picker... but it only happens when using iframes from another website. In my case, in salesforce 3 iframes, one inside another, are created!

I managed to get it working by forcing a patch with https://www.npmjs.com/package/patch-package

diff --git a/node_modules/react-color/es/components/common/Saturation.js b/node_modules/react-color/es/components/common/Saturation.js
index 8e2f44c..1749ee8 100644
--- a/node_modules/react-color/es/components/common/Saturation.js
+++ b/node_modules/react-color/es/components/common/Saturation.js
@@ -52,8 +52,14 @@ export var Saturation = function (_ref) {
       var container = this.container;
 
       var renderWindow = window;
-      while (!renderWindow.document.contains(container) && renderWindow.parent !== renderWindow) {
-        renderWindow = renderWindow.parent;
+      var lastRenderWindow = window;
+      try {
+        while (!renderWindow.document.contains(container) && renderWindow.parent !== renderWindow) {
+          lastRenderWindow = renderWindow;
+          renderWindow = renderWindow.parent;
+        }
+      } catch (e) {
+        renderWindow = lastRenderWindow; // inside iframe it throws error... use last accessible
       }
       return renderWindow;
     }
diff --git a/node_modules/react-color/lib/components/common/Saturation.js b/node_modules/react-color/lib/components/common/Saturation.js
index 0a80592..e1bb4d0 100644
--- a/node_modules/react-color/lib/components/common/Saturation.js
+++ b/node_modules/react-color/lib/components/common/Saturation.js
@@ -74,8 +74,14 @@ var Saturation = exports.Saturation = function (_ref) {
       var container = this.container;
 
       var renderWindow = window;
-      while (!renderWindow.document.contains(container) && renderWindow.parent !== renderWindow) {
-        renderWindow = renderWindow.parent;
+      var lastRenderWindow = window;
+      try {
+        while (!renderWindow.document.contains(container) && renderWindow.parent !== renderWindow) {
+          lastRenderWindow = renderWindow;
+          renderWindow = renderWindow.parent;
+        }
+      } catch (e) {
+        renderWindow = lastRenderWindow; // inside iframe it throws error... use last accessible
       }
       return renderWindow;
     }

[jaywcjlove]

You are not using @uiw/react-color. You should go to react-color to ask the wrong question.

[i23098]

Just found similar issue that's reported in react-color - casesandberg/react-color#806

[jaywcjlove]

Can you give me a reproducible example using codesandbox.io?

@i23098

[i23098]

Just found similar issue that's reported in react-color - casesandberg/react-color#806

I'll close bug here, bug is already open there :)