Editor(Quill) is not functional in production (add reproduction)

ga676005 commented 2 years ago

I'm submitting a ... (check one with "x")

[x] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primevue/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=110

CodeSandbox Case (Bug Reports) cannot reproduce because it only happens on production. It shows a warning message on chrome [Violation] Added synchronous DOM mutation listener to a 'DOMNodeInserted' event. Consider using MutationObserver to make the page more responsive. when the Editor is added to the DOM. I have looked it up and It seems to be an issue from Quill.

Current behavior The dropdown of Editor stop working after toggling by v-if or route change.

Expected behavior The dropdown of Editor should always work.

Minimal reproduction of the problem with instructions https://user-images.githubusercontent.com/51456572/167564684-ddb8e1f0-a192-43f9-91d2-963672758a03.mp4

toggle v-if=true of the editor
dropdown is clickable
toggle v-if=false and true again
dropdown is not clickable afterwards

Vue version: 3.2.31
PrimeVue version: 3.12.6
Browser: Chrome and Firefox show message in the console when I toggle v-if of the Editor.

Chrome 101.0.4951.54 [Violation] Added synchronous DOM mutation listener to a 'DOMNodeInserted' event. Consider using MutationObserver to make the page more responsive.

Edge 101.0.1210.39

Firefox Developer Edition 101.0b4 已棄用 Mutation Events。請改用 MutationObserver。 which means Mutation Events are abandoned, use MutationObserver instead.

tugcekucukoglu commented 2 years ago

Thanks for the instructions but still I could not replicate the issue. In production PrimeVue Editor seems to working. How can I replicate the issue? If you could send us a codesandbox sample, we could see the problem exactly.

ga676005 commented 2 years ago

Thank you for your reply. I have made a minimal reproduction. It only happens in production mode, so I create a repo. deployed on netlify: https://627b815fb6efcf54792e9b00--splendid-tulumba-1cb97b.netlify.app/

https://user-images.githubusercontent.com/51456572/167750578-30c91a62-c2d4-473b-8e57-15cd54c9a860.mp4

git clone https://github.com/ga676005/primevue-editor-bug-reproduction
npm i
cd primevue-editor-bug-reproduction
npm run build
npm run preview
open the page
click the toggle button to show Editor, notice the dropdown is clickable
click the toggle button twice to hide and show Editor again, now dropdown is not clickable

If you open the console of Chrome, you will see this warning every time the editor is showed

If it runs in dev mode by npm run dev, the Editor function well.

ga676005 commented 2 years ago

@tugcekucukoglu Hi, I have added the reproduction.

ga676005 commented 2 years ago

Sorry that I forgot one step. You need to npm run build first to be able to npm run preview.

minzdrav commented 2 years ago

Hi Guys I have exactly same issue with editor. Any chances we can get fix soon or I should try another editor?

martinszeltins commented 2 years ago

@tugcekucukoglu I am also having this same issue. It seems to not re-initialize after being toggled with v-if. It starts to work again only after doing a full page refresh. I will attach a video below. Hope this gets fixed soon.

Screencat: editornotowrking