Autocomplete dialog is not positioned correctly when editor is transformed

This screenshot shows the problem: when I have a Codemirror editor which is a descendant of a transformed element, then the autocomplete dialog shows in the wrong position. It is offset in different ways as you change the transform (by panning around, in my app):

The reason the editor is inside a transform is that I’m making an infinite canvas app, using react-zoom-pan-pinch for panning the canvas.

So the editor has an ancestor node which has something like transform: translate3d(122px, -188px, 0px) scale(1)

I’m not sure how to fix this - I want to change the positioning code for the autocomplete dialog, but I’m not sure how to do this.

I’m not sure how to pass the information about the current pan position into the autocomplete codemirror extension. What’s the best way to do that (performantly?)

See issue 324. This is unlikely to be solved on the short term.

1 Like