search

quill-mention / quill-mention

💬 @mentions for the Quill rich text editor
https://quill-mention.com/
MIT License
755 stars 273 forks source link

Mention throws TypeError s.domNode.getBoundingClientRect is not a function #405

Open Ashokthakuri opened 4 months ago

Ashokthakuri commented 4 months ago

When I try to mention use with @ character in the quill editor, it sometimes throws TypeError s.domNode.getBoundingClientRect is not a function in the console and the suggestions does not appears.

Steps for Reproduction: I tried to replicate the issue locally but couldn't. The issue appears frequently in Vercel (sometime it works after multiple page refresh), where I have deployed my code. I am not sure whether the issue is with Vercel itself or with quill-mention.

quill

Expected behavior: The mention feature should show the suggestions

Actual behavior: The following error is thrown in the console and the suggestions don't work


TypeError
s.domNode.getBoundingClientRect is not a function

I am using nextjs(react):

"next": "14.2.3",
"react": "18.3.1",
"react-quill": "^2.0.0",
"quill-mention": "^4.0.1",
thicha0 commented 2 months ago

Hello, I had the same problem with vercel. I noticed that I did not had this problem in all environments and also the problem did not appear in private mode.

After investigating, I found out that the vercel preview toolbar was the root of the problem (only when connected).

PS: while connected, I get the same error of getBoundingClientRect but the behavior is pretty weird since I can write normally into the editor and make the mentions work when you add style to a line (the first line doesn't seem to work, then add new line, toggle bold, write text, type "@" for mentions and it should appear on this line).