microsoft / microsoft/vscode-extension-samples

MultiStepInput in QuickInput doesn't work

Open
#164 0 comments 0 reactions 1 assignee View on GitHub

@chrmarti is already working on this.

Since Mar 17, 2019.

bug
Dominant language
TypeScript
Stars
10.2k
Forks
3.9k
PR merge metrics
No merged PRs in 30d

Description

VS Code Version
Version: 1.32.3 (user setup)
Commit: a3db5be9b5c6ba46bb7555ec5d60178ecc2eaae4
Date: 2019-03-14T23:43:35.476Z
Electron: 3.1.6
Chrome: 66.0.3359.181
Node.js: 10.2.0
V8: 6.6.346.32
OS: Windows_NT x64 10.0.17134

I was attempting to navigate the sample as the preview.gif, but as soon as I choose an option from the first step quickPick, the second step inputBox did not show up.

While debugging, I placed a breakpoint on the line for this.current.show() in the MultiStepInput.showInputBox method. The breakpoint would get hit, and I would hit resume. The second step would then show up - though trying to focus on it would cause it to fail.

So I put console logs in to see what might be happening and got the following output.
image

While the inputBox appears to show - it is hidden immediately. As a shouldResume is set, it looks like it is awaiting the results of that, though it never completes (as an example stub - neither resolve nor reject is called).

If I set the ignoreFocusOut the window stays, but doesn't have focus - which is of course not an ideal user experience.

If I cause shouldResume to resolve to true - then I see the inputBox get created, hidden immediately, and created again - focus isn't an issue this time, but cancelling via Esc is.

Using the breakpoint trick to get the next window to stay, and using the Chrome/Electron Developer Tools window I can see that document.activeElement is correctly set to the input field in the inputBox, but when I attempt to set focus to the window the focus shifts to body.monaco-shell:
image

I've attached a copy of the modified multiStepInput.ts for reference.
multiStepInput.zip

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.