search

surveyjs / survey-library

Free JavaScript form builder library with integration for React, Angular, Vue, jQuery, and Knockout.
https://surveyjs.io/form-library
MIT License
4.2k stars 812 forks source link

Drag-and-drop doesn't work with shadow DOM #7965

Closed dmitry-kurmanov closed 7 months ago

dmitry-kurmanov commented 8 months ago 
          My primary issue is that taliwind css mutates some base styles that conflict with SurvyeJS.

To solve this I was attempting to place SurveyJS in the Shadow DOM to separate tailwind and SurveyJS stylings. That worked with the new settings API described in the PR above. However, it seems that when drag&drop is used, it pulls the Shadow DOM root, and then get's the host property which is where it appends the dragged element. However, in that context the Survey JS CSS is not applied resulting in the element not appearing on screen.

|_ Host Element
   |_ Shadow DOM
   |_ Dragged Element

IMO, the tree should look like this to pickup on the CSS...

|_ Host Element
   |_ Shadow DOM
      |_ Dragged Element <-- Indentation, styles applied.

What did I miss?

Edit: I'm working in React, incase that has implications, though I don't believe so.

Originally posted by @cworsley4 in https://github.com/surveyjs/survey-library/issues/5703#issuecomment-1992132190

dmitry-kurmanov commented 8 months ago

Demo to reproduce https://codesandbox.io/p/sandbox/shadow-dom-with-react-forked-47jv3f?file=%2Fsrc%2FApp.js%3A13%2C8

elementFromPoint for ShadowDom

cworsley4 commented 8 months ago

Thank you @dmitry-kurmanov I appreciate you escalating this

iwnow commented 7 months ago

@dmitry-kurmanov why it was reverted?

dmitry-kurmanov commented 7 months ago

@dmitry-kurmanov why it was reverted?

we faced with a problem with one integration test for vue3 and reverted it for a while. I believe that we will include the fix in the next release