Quill Mention throws TypeError s.domNode.getBoundingClientRect is not a function

Question

Trying to mention users with @ character in the quill editor throws TypeError s.domNode.getBoundingClientRect is not a function in the console and the suggestions are not shown.

Steps for Reproduction The error is a little tricky to reproduce as only a few of my company's clients occasionally experience the issue on production. screenshot below

Pleasee see screen shot for issue here

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 Platforms:

browser: Chrome 104.0.5112.101 (Official Build) (arm64) device: Mac os: Mac OS X 11.4 (BigSur)

Please share a piece of code where you actually initialising the Quill editor. — Федор Усаков, Sep 15 '22 at 13:26

score 1 · Answer 1 · answered Sep 15 '22 at 13:30

Here is in example of initialising the Quill. Please make sure that you have bounds: document.body line included.

const quill = new Quill('#editor', {
    modules: {
        toolbar: [
            [{ header: [1, 2, false] }],
            ['bold', 'italic', 'underline'],
            ['image', 'code-block']
        ]
    },
    bounds: document.body,
    placeholder: 'Compose an epic...',
    theme: 'bubble' // or 'bubble'
});

Quill Mention throws TypeError s.domNode.getBoundingClientRect is not a function

1 Answers1