Microsoft/monaco-editor

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

Open

#4.010 aberto em 6 de jun. de 2023

Ver no GitHub
 (0 comments) (2 reactions) (0 assignees)JavaScript (1.283 forks)batch import
bugeditor-corehelp wanted

Métricas do repositório

Stars
 (14.836 stars)
Métricas de merge de PR
 (Mesclagem média 6h 26m) (15 fundiu PRs em 30d)

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

Guia do colaborador