Microsoft/monaco-editor

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

Open

#4010 opened on Jun 6, 2023

View on GitHub
 (0 comments) (2 reactions) (0 assignees)JavaScript (14,836 stars) (1,283 forks)batch import
bugeditor-corehelp wanted

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