microsoft / microsoft/monaco-editor
[Bug] Menu inside inline completions action bar is not styled correctly
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
monaco.editor.create(document.getElementById('container'), {
value: "function hello() {\n\talert('Hello world!');\n}",
language: 'javascript',
inlineSuggest: {
enabled: true,
}
});
class InlineCompleter {
provideInlineCompletions() {
return {items: [{insertText: '11111'}, {insertText: '22222'}]};
}
freeInlineCompletions() {}
}
monaco.languages.registerInlineCompletionsProvider('javascript', new InlineCompleter());
Reproduction Steps
- Trigger the inline completions provider
- Hover over suggested text so that action bar shows up
- Click three-dot menu in action bar
- Notice there are no styles applied to the three-dot menu (bug)
Actual (Problematic) Behavior
The three-dot menu does not have any styling applied to it. It looks like it is added to the DOM outside of the .monaco-editor context and therefore thinks that none of the styling variables exist. The result is that the menu is unstyled.
Expected Behavior
The three-dot menu for inline completions action bar should have styling applied to it.
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
Open the linked Monaco Editor Playground and reproduce the unstyled three-dot menu in the inline completions action bar. Trace how that menu is styled relative to the .monaco-editor context; done means the menu has the expected styling in the supplied reproduction.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100