react-color icon indicating copy to clipboard operation
react-color copied to clipboard

Published 20 hours ago • verified publisher icon casesandberg

Fixed using EditableInput in shadow DOM.

Open Nuurek opened this issue 3 years ago • 3 comments

When I tried to use react-color inside of a Shadow DOM then none of the text inputs worked. Digging down into the code I found this single line that was trying to access the active element from the top-level document.

In such a scenario:

<body>
  <custom-web-component>
    <AnyPickerWithEditableInput>
      <EditableInput/>
    <AnyPickerWithEditableInput/>
  <custom-web-component/>
<body/>

where the node of custom-web-component is the Shadow Root, document.activeElement was returning the Shadow Root node. Changing it to getRootNode() returns correct active elements and inputs start working.

Nuurek avatar Mar 16 '21 13:03 Nuurek

I really need this.

Holybasil avatar Mar 17 '21 09:03 Holybasil

You can implement a temporary workaround while this PR is waiting to be merged:

  1. Install react-color
  2. Install patch-package into devDependencies
  3. Create postinstall script in package.json: "postinstall": "patch-package"
  4. Make the above changes to /node_modules/react-color/es/components/common/EditableInput.js
  5. Run npx patch-package react-color to save these changes to a new patches directory. Whenever you reinstall deps your patches will be applied to react-color

lfriis avatar Mar 31 '23 01:03 lfriis

@casesandberg what's the likelihood of getting this merged?

dkaps125 avatar Jul 21 '23 14:07 dkaps125