[Bug] Quick input service needs a focused editor to work

[IvoMiller]

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 Code

Could not reproduce in monaco editor playground, though I did try with the raw javascript there. We pull in monaco-editor as a library in the website of a React electron application.

Code:
      <MonacoDiffEditor
        height="100%"
        language="pgsql"
        original="Some sql (derived)"
        value="Some other sql (derived)"
        options={{
          readOnly: true,
          selectOnLineNumbers: true,
          minimap: { enabled: false },
          automaticLayout: true,
          scrollBeyondLastLine: false,
          wordWrap: "on",
        }}
      />

Actual Behavior

Right click or F1 allows users of the application to access the command palette
Some commands do not work and throw unhandled errors we cannot catch
e.g. Indent using spaces.

Error thrown is "Quick input service needs a focused editor to work"

Expected Behavior

As this is readonly we have no desire for the command palette to be enabled/accessible but there seems to be no way to suppress it.
If it is there, we would expect to be able to suppress operations which will throw errors, or some way to intercept and handle the errors.

Additional Context

As this is a react application we do not want to be doing any workaround which involves messing with the dom directly.

[manikantag]

I'm facing this issue when executing editor.getAction('editor.action.gotoLine').run(). As a workaround, I'm calling editor.focus() before running the action.

[jayad23]

Hi, it seems there is no option that could be provided as prop to work around this issue other than "options={{ contextmenu: false}}". However, this only solves the issue with the clicker, yet the user might still access it via the F1 key. The error is not just about not wanting it to appear, but also that it creates an unhandled async function that resolves to error as many times as the cursor moves up and down.

If you're working with React, you might think that using a ref || forwardRef might help, but that's not the case with this editor.

So, there are two possible ways to work around it:

1. You can extend the editor and access its properties, then you can modify how to alter the elements in the DOM in which the editor is verted. That process is very manual and not intuitive, and that's mainly because the editor was not thought of that way.
2. What's really going on when pressing the F1 key is that a default css property on the className "quick-input-widget" is being removed: "display: none"; so, you can include the className in your global css, and add the "display: none !important" property so that it can't be changed.

That will get you what you want.

[vishalsatam]

I'm triggering the command palette using this trigger when an "external button" is clicked.
editor?.trigger('externalButtonClick', 'editor.action.quickCommand', null)
But the pre-requisite for this is that the editor needs to be focussed and so I focus first using
editorRef?.current?.focus()

In this case, for accessibility reasons, when the user exclusively uses the keyboard and presses the ESC key to hide the palette, they are now focussed into the editor and are not able to escape out to the "external button" where they triggered the palette from.

What I'm looking for is a callback when the palette closes and let's me know where the palette was originally triggered from.
In my case externalButtonClick.
It would be amazing if monaco editor can do this. I'm currently breaking my head trying to figure out how to hack around to implement this.