Hi,
We are facing similar issue as this thread while trying to render codemirror in MUI Popover element. The autocomplete tooltip is appearing hidden behind the input box and of same size as input box. The position is absolute, when I played around with position, only fixed position seems to give a correct UI, but the position of tooltip is relative to browser and not attached to the cursor.
When I tried in firefox, somehow it’s working perfectly fine and position if fixed. This issue is only happening in Chromium browsers. As discussed in linked thread I believe this issue might be happening because of some transform applied to parent Popover element.
Since the code is proprietary I’m unable to share code or screenshot, but I’ve prepared a minimal codesandbox to share a very similar code to the one we’re using. However, there is one issue that the problem is not replicable within the sandbox, probably because of what browser it would be using internally.
Could you help us out here and suggest possible causes of the problem and/or possible fixes? Thanks in advance!
Is your editor being transformed with a CSS transform style? That will force absolute positioning (since position: fixed doesn’t really work inside a transform). If not, this may be a case of the library incorrectly detecting a transform, and I’d be interested in seeing the wrapping HTML/CSS in a minimal reproduction.
There is no transform directly applied to the editor itself. But, I believe its parent Popover element has some transform. Does that modify the position from fixed to absolute like you mentioned?
I’m attaching screenshots of styles of the autocomplete from chrome dev tools, can’t figure out a better way to share. Only difference from the Firefox styles seem to the value of position. Please let me know if you need something else to help out here.
Also, I’m still checking on some way to share a minimal reproducer of the issue, I’ll share as soon as I can.
Yes. Fixed positioning happens relative to the nearest transformed parent (or the page), so such a transform will mess up the tooltip’s positioning, which is why the library switches it to absolute. The reason absolute positioning isn’t the default is that it makes the kind of clipping you’re seeing possible.
It may be possible to use the parent tooltip configuration option to work around this.
Thanks a lot @marijn! Your suggestion has fixed the issue. We tried setting the parent to something above Popover, and it worked. Since we are actually working on a library, to prevent our users the hassle of doing this themselves when they are using it, we’ve set the parent to document.body, so that there is no chance of finding transform property. If you believe, this can cause a issue in some case, please let me know.
Thanks again for your timely response.
