microsoft / monaco-editor

A browser based code editor

Home Page:https://microsoft.github.io/monaco-editor/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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

acherkashin opened this issue · comments

Reproducible in vscode.dev or in VS Code Desktop?

  • Not reproducible in vscode.dev or VS Code Desktop

Reproducible in the monaco editor playground?

Monaco Editor Playground Link

https://microsoft.github.io/monaco-editor/playground.html?source=v0.50.0#XQAAAALTAQAAAAAAAABBqQkHQ5NjdTrnpv_fvV9qAMfxMYIuO6niusC9QtfPsm9taNX_wBjCy8oXtXpKXpZv3ve_DlqRToqTT3BB7pyPxes4nAiMzrZgwHbwCbQXh6Jit7uc2B-f1qgoKy5BnNrvTPloPlWVeAqIbhN72cEos8siU_iVjfDIGZVSc6HdfcluTCrnbrOZVd8ydejjYAP2CqsLlVfwHAhqTwq7jyf__42MTxwRkUEpqjOWYxIABe4-zky57CuPlx7tOcZK0MV6MqlqD8U9iAUu7cu-MeUZ0eNk0bHiAG7v5coidrqOZ0RddNNMNFKZZf8Jz9YELzW7BsA5Koc3TNTqNba5dHM05_z1KEcjPNNeBapwbbUcQYB1SzfjmFp7bw-W9hgtBsptylsA64OWgH6ORGGSi72jabF1JBKiqC4D_nGFSHEZ5XCgIGvsC6AG2aA0aJbigK8VvAWkdbvIgP_vjf19

Monaco Editor Playground Code

const value = /* set from `myEditor.getModel()`: */ `function hdsdello() {
	alert('Hello world!');
}
func`;

// Hover on each property to see its docs!
const myEditor = monaco.editor.create(document.getElementById("container"), {
	value,
	language: "javascript",
	automaticLayout: true,
	fixedOverflowWidgets: true
});
<div style="transform: translate(84px, 165px); height: 100%;">
    <div id="container" style="height: 100%"></div>
</div>

Reproduction Steps

No response

Actual (Problematic) Behavior

Suggestion widget shows at a wrong location (left is correct, top is incorrect) when fixedOverflowWidgets is true.

Old issue #2503.

image

Expected Behavior

I expect it to work in the same way as when fixedOverflowWidgets is true

image

Additional Context

No response