microsoft / microsoft/monaco-editor

[Bug] Error tooltip is shown above when there is space on the bottom and no space on the top when parent element has "transform" attribute

Open
#4,580 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
JavaScript
Stars
46.8k
Forks
4.1k
Avg merge
17h 58m
Merged PRs (30d)
1

Description

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#XQAAAALOBQAAAAAAAABBqQkHQ5NjdV2nAv_fvV9qAMfxMYIuO6niusC9QtfPsm9taNX_wBjCWhMW4zgGo8d-dNGkpD-ne7NAjjtT_I8OoHyM8FVU-Vy7bb2zIGfeE8WZa2-k9Y72IpqUjkqWrmfWkbgz6vGz1boI1xJKkbxTmzjNqEUlEtZMxyIo551xwdDEEV-Nl35HLelvmoaAH2QBccxpF4RtBxcDKq4bwLy4AEhRn68p9LJceZsQsEWmKdGmf51ljKkvUBIHuPn7MAxK5nLOGQbxQ8JOPUNQauvaNIj_pbGCGXdHcdQzsQccqN1cGSFXA4KgQ6cgnMX1KdpOjtTvNwMX1Qyd69_-kn6gdY-ypGwXgc6v9-nK1Q8khiCGOkjADnNj9j2GFUiz-imqxWcwNLxY73ImmuhCavOR-Q9crbA3iXk-rirdGTJqw0x0tPO68aGOut016ULgueh7m6bufWOL9Mybct4_q0hbt5d2xTDD1J8xFHucfT1qQQanfbjiXC7ChHWqbul5jYzo0YKXmmOCvixd6O6-isPK1vRFrIl7wthSbJZOgDmMWRb_r2ur4QKezpaZ5FvxydzilV6wmOcI_4z5TlyGS3dEyFyawXxBW43XHRX8-D8aWmzi8W5tWC7X6wimRAH8WygzbhIBX63mnFTCZ1pVtLysYIX6thHEXXq1s4060ZKeV4iq--1wGm6W8FylXlqkkTSrgNgO16UM30xzPazDBjw6L9UUcKrlh8AmzybzVcjU8vJuq4mZeCwRp0VE0vpvAjh-uSiHPiDN-fWRlsEUkEVWoESO8dxQm4ZAPyfNGxEK407SqonFb-xeDD-XJjRAAlj65Lmcfc8FueAsyHNIytcyThJeB6_9owAXD4gwXxKrkXuKxv_6wilz

Monaco Editor Playground Code
function validate(model) {
	const markers = [];
	// lines start at 1
	for (let i = 1; i < model.getLineCount() + 1; i++) {
		const range = {
			startLineNumber: i,
			startColumn: 1,
			endLineNumber: i,
			endColumn: model.getLineLength(i) + 1,
		};
		const content = model.getValueInRange(range).trim();
		const number = Number(content);
		if (Number.isNaN(number)) {
			markers.push({
				message: "not a number",
				severity: monaco.MarkerSeverity.Error,
				startLineNumber: range.startLineNumber,
				startColumn: range.startColumn,
				endLineNumber: range.endLineNumber,
				endColumn: range.endColumn,
			});
		} else if (!Number.isInteger(number)) {
			markers.push({
				message: "not an integer",
				severity: monaco.MarkerSeverity.Warning,
				startLineNumber: range.startLineNumber,
				startColumn: range.startColumn,
				endLineNumber: range.endLineNumber,
				endColumn: range.endColumn,
			});
		}
	}
	monaco.editor.setModelMarkers(model, "owner", markers);
}

const value = `12345
abcd
234.56
12345
abcd
234.56`;
const uri = monaco.Uri.parse("inmemory://test");
const model = monaco.editor.createModel(value, "demoLanguage", uri);
const editor = monaco.editor.create(document.getElementById("container"), {
	model,
});
validate(model);
model.onDidChangeContent(() => {
	validate(model);
});
Reproduction Steps

Hover on the underlined error element on the second line

image
Actual (Problematic) Behavior

There is much more space on the bottom, however, element is show on the top for some reason.
In my production code, monaco-editor is inside material-ui dialog that uses transform: translate(x,y) styles to position dialog.

For my use case it looks in the following way. There is a lot of space in the bottom, but tooltip is shown above.
For some reason, it happens only when you move parent with "transform" styles to the bottom of the screen, when it is on the top, everything works fine.

image
fixedOverflowWidgets

I cannot use fixedOverflowWidgets: true setting due to the following issue that I've recently created.

https://github.com/microsoft/monaco-editor/issues/4579

Expected Behavior

Tooltip with the error should be shown in bottom part, as there is more space there.

Additional Context

No response

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by running the linked Monaco Editor Playground reproduction and reviewing the provided marker and hover setup. Trace how the error tooltip chooses its position when the editor's parent uses transform and compare available space above and below. Done means the tooltip appears below when that side has more room, without breaking the reported reproduction.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, typescript
Domain
frontend, web-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.