At.js with Trix editor: error "The given range isn't in document."

Question

I am trying to integrate At.js into Trix editor so that I can @mention users.

$('trix-editor').atwho({
    at: "@",
    data:['Peter', 'Tom', 'Anne']
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/basecamp/trix/master/dist/trix.js"></script>
<script src="https://cdn.rawgit.com/ichord/At.js/master/dist/js/jquery.atwho.js"></script>
<script src="https://cdn.rawgit.com/ichord/Caret.js/master/dist/jquery.caret.js"></script>
<link href="https://cdn.rawgit.com/basecamp/trix/master/dist/trix.css" rel="stylesheet"/>
<link href="https://cdn.rawgit.com/ichord/At.js/master/dist/css/jquery.atwho.css" rel="stylesheet"/>


Trix Editor: 
<form action='#'>
  <input id="x" type="hidden" name="content" value="Type @">
  <trix-editor input="x"></trix-editor>
</form>

As you can see in the example above, the popup appears, but when you select an item you get the following error: jquery.atwho.js:686 The given range isn't in document.

What does "The given range isn't in document" mean where should I start looking to debug it?

Answer 1

I had the same error, The given range isn't in document, and it happened because the DOM element that I used to get the range had been removed from the DOM.

I tried to try/catch the error on sel.addRange(range); in the javascript but it didn't work (why? I don't know, maybe it's asynchronous...) so the solution I found is to check if the container of the range element still exists in the DOM:

if (document.body.contains(range.commonAncestorContainer))
    sel.addRange(range);

This prevents the call to .addRange if the range element has been removed from the DOM in the meantime. I hope it helps!