fixedOverflowWidgets=true makes suggestion widget shows at a wrong location when monaco-editor is hosted inside fluent Callout control

[weizhang-ms]

https://codesandbox.io/s/affectionate-satoshi-ywlnk?file=/src/App.js

The Monaco-editor is placed inside a fluent Callout control (https://developer.microsoft.com/en-us/fluentui#/controls/web/callout)

fixedOverflowWidgets=true - suggestion widget shows at a wrong location (left is correct, top is incorrect)

fixedOverflowWidgets=false - suggestion widget shows at the right position, but it doesn't show complete...

[moorain]

I have the same problem. How can I solve it？

[weizhang-ms]

My workaround is to change the Callout style to overflow: 'visible', and set monaco-editor options fixedOverflowWidgets: false

        <Callout
          style={{ width: 400, padding: 16, height: 400, overflow: 'visible' }}
          gapSpace={0}
          target={`#buttonId`}
          setInitialFocus
        >
          <MonacoEditor
            height="100%"
            language="javascript"
            options={{ fixedOverflowWidgets: false }}
          />
        </Callout>

[dehoward]

We're noticing the same issue when using the fluent Panel.

sandbox

Notice that when the Editor is inside the Panel, the read-only widget appears in the wrong place:

But when outside, the widget is correctly placed:

[HappyEmu]

We have the same problem using fixedOverflowWidgets: true inside a Semantic UI React modal.

[dehoward]

@HappyEmu good to know, seems it's not Fluent related in that case.

[y6936]

After some investigation I found out that the animation on the callout/panel is causing the issue.
As a workaround you could set the animationName to 'none' on the Panel or Callout styles to get rid of the
animation which fixes the problem.

[silverwind]

transform: translate(0px) on parent elements also triggers this bug.

Edit: Seems transform alone is not enough to reproduce, there must be something else as well.

[hediet]

Thanks for reporting this! I'm not sure, but this actually might be a duplicate.
In case it is not, please create an new issue and provide a reproducible example in the monaco editor playground. Thanks!

[silverwind]

There are two reproducible examples in this issue. They could be more minimal but do showcase the issue.

[hediet]

Please reproduce in the monaco editor playground, because there we can control the monaco editor version, have debugging and can rule our bundling/framework issues.