microsoft / microsoft/monaco-editor
Native "select all" shortcut (Ctrl + A) does not work in Editor searchbar input in webComponents
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?
- Not reproducible in the monaco editor playground
Monaco Editor Playground Link
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: "html",
value: `<div>Hello World</div>`,
});
}
}
);
HTML
<template id="editor-template">
<div
id="container"
style="overflow: hidden; width: 100%; height: 100%; position: absolute"
></div>
</template>
<code-view-monaco></code-view-monaco>
Reproduction Steps
-Press ctrl + F to open the search input in monaco editor
-Type anything in search input
-Press ctrl + A to select all in the search input (does nothing)
Actual (Problematic) Behavior
Native "select all" shortcut (Ctrl + A) does not work in Editor searchbar input in webComponents
Expected Behavior
Native "select all" shortcut (Ctrl + A) select all typed words in search input
Additional Context
No response
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the linked Monaco Editor Playground web-component example and reproduce the searchbar behavior after opening it with Ctrl+F. Trace the search input handling in the web component context, then verify that Ctrl+A selects all typed text in the search input without regressing ordinary editor search behavior.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100