DOMException when using color picker inside Salesforce (iframe)

[i23098]

Using the color picker inside salesforce (that creates an iframe to load my webapp), there's an DOMException inside Saturation.js when selecting a color

[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]

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

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

[luhw]

Used the code of @i23098, I handled this problem like this:

import Saturation from 'react-color/es/components/common/Saturation'

Saturation.prototype.getContainerRenderWindow = function () {
  var container = this.container
  var renderWindow = window
  var lastRenderWindow = window

  try {
    while (
      !renderWindow.document.contains(container) &&
      renderWindow.parent !== renderWindow
    ) {
      lastRenderWindow = renderWindow
      renderWindow = renderWindow.parent
    }
  } catch (e) {
    renderWindow = lastRenderWindow
  }
  return renderWindow
}