CODEWITHSUNDEEP
javascriptreactjsreact-fullstackreact-quill
Taranjeet Singh
Taranjeet Singh

Reputation: 26

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

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)

Upvotes: 1

Views: 678

Answers (1)

Федор Усаков
Федор Усаков

Reputation: 1255

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'
});

Upvotes: 1

Related Questions