microsoft / microsoft/monaco-editor

[Bug] Clicking on context menu action doesn't re-focus if the editor is on a shadow dom

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

Nobody has claimed this yet.

bug editor-core help wanted
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.39.0#XQAAAAI6BAAAAAAAAABBqQkHQ5NjdYzqEXhNewrSKZslyM_G2I4bTkHQYW1lB1MplPA6z0speGDFvgRIQQx0HI9zdEFZdk3ipJqwzu6RT44vPXZPcpCKxnvgE9TYAtuAi9VQr3EAhbQJCn4JPD8EaFYCtRcYWa8_pnHjN-uDjxrhmN3g8tmx0iWUz1zF7VMROnGNjfHj2TFmcBooqFj0KG-T22ZTQveC4ldZtj1EFTqyCu3JsVl3KOYJ6jN6L0f3T19XU0zb02ACeJdPM0CLl86jemlCWOl0JG2J0dhzEnjqM4XqGYciXM6FV3rlh6jWFIDoEjxiyRdkgg164RAoK8mzvr3giDxMuoweZZDoih64ZPCD5FGSGyefl8oP3r2o6-A-doKI7bGjscOo0bFg51Ej-q0LUp49Nf980se0b39IbB-NuZaImBNP1_GTMBRfD0LuX4tCYeRojU5qSHjJuoFtma8Z2LCLsQDvni7nbpCpjPO6wxOxKQToWD7HNeRAK0pRdgdwBvfeofsZ_MQad99NC7BbZfS5veQowPkFo3RV52gVyWlYW5bn4MOA0x0jD3f19SKbmJQUfFmKWveSAWGoTwm0WYmns4p_Z3bZ2ixsX23j4tz2pGSqMquo_3qLxH8bGPC2AAmLZRhSFWWhw-A_BuLIDN4Bu8ZDVCxV0t2m4DpJqLF87KFHo-wlgjyFjRegisvjvowEvfV7DoaTytMAQQdqg2u0IlmErqXrM6vNBeAEFTn8bEpPtc7sV6RK3gjnnqc2_B76l_0sYZtlzsZQcNExdqmPhXuIB7PVX5nn2m6UZ9v_Z3b_AA

Monaco Editor Playground Code
customElements.define(
	"code-view-monaco",
	class CodeViewMonaco extends HTMLElement {
		_monacoEditor;
		/** @type HTMLElement */
		_editor;

		constructor() {
			super();

			const shadowRoot = this.attachShadow({ mode: "open" });

			// Copy over editor styles
			const styles = document.querySelectorAll(
				"link[rel='stylesheet'][data-name^='vs/']"
			);
			for (const style of styles) {
				shadowRoot.appendChild(style.cloneNode(true));
			}

			const template = /** @type HTMLTemplateElement */ (
				document.getElementById("editor-template")
			);
			shadowRoot.appendChild(template.content.cloneNode(true));

			this._editor = shadowRoot.querySelector("#container");
			this._monacoEditor = monaco.editor.create(this._editor, {
				automaticLayout: true,
				language: "javascript",

				value: `function hello() {
	alert('Hello world!');
}`,
			});
		}
	}
);
Reproduction Steps
  • select a piece of the text
  • right click the selected text
  • "Copy" ( or any other action)
Actual (Problematic) Behavior

the selected text is copied but loses the focus

Expected Behavior

it should do the same as an editor not in a shadow dom(e.g.: https://microsoft.github.io/monaco-editor/playground.html?source=v0.39.0#example-creating-the-editor-hello-world) and keep the focus.

Additional Context

I believe this issue is also making it impossible to use the "Paste" action in a shadow-dom, it loses the focus as soon as you open the context menu, making it impossible to go through this condition.
But I can't reproduce it in playground because "Paste" action doesn't work at all in playground https://github.com/microsoft/monaco-editor/issues/2264

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 with the linked Monaco Editor playground and the provided custom-element reproduction, then compare it with the non-shadow-DOM example. Reproduce the context-menu Copy action after selecting text, and verify that the editor retains focus afterward; also check whether the Paste action behaves consistently with the reported clipboard condition.

Written by the indexing model from the issue text.

Assessment

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.