From fa76f1eb0731b4ec39573bdae023c774239cea55 Mon Sep 17 00:00:00 2001 From: Tyler James Leonhardt Date: Fri, 16 Dec 2022 13:24:12 -0800 Subject: [PATCH] Use readonly for enable/disable of quick pick in order to preserve focus to the inputbox (#169440) Fixes #163753 This is a tactical fix in order to give us a "disabled" input box but also not mess with focus. The look of a disabled quick input still needs to be done, but that can be done when quickpick applies style via CSS variables instead instead of inline. --- src/vs/base/parts/quickinput/browser/quickInput.ts | 3 --- src/vs/base/parts/quickinput/browser/quickInputBox.ts | 10 +++++++++- 2 files changed, 9 insertions(+), 4 deletions(-) diff --git a/src/vs/base/parts/quickinput/browser/quickInput.ts b/src/vs/base/parts/quickinput/browser/quickInput.ts index 37d6e471772..f3e8bdff07d 100644 --- a/src/vs/base/parts/quickinput/browser/quickInput.ts +++ b/src/vs/base/parts/quickinput/browser/quickInput.ts @@ -1730,9 +1730,6 @@ export class QuickInputController extends Disposable { this.getUI().inputBox.enabled = enabled; this.getUI().ok.enabled = enabled; this.getUI().list.enabled = enabled; - if (!enabled) { - this.getUI().container.focus(); - } } } diff --git a/src/vs/base/parts/quickinput/browser/quickInputBox.ts b/src/vs/base/parts/quickinput/browser/quickInputBox.ts index f73ff7d739a..d85d88f212c 100644 --- a/src/vs/base/parts/quickinput/browser/quickInputBox.ts +++ b/src/vs/base/parts/quickinput/browser/quickInputBox.ts @@ -91,7 +91,15 @@ export class QuickInputBox extends Disposable { } set enabled(enabled: boolean) { - this.findInput.setEnabled(enabled); + // We can't disable the input box because it is still used for + // navigating the list. Instead, we disable the list and the OK + // so that nothing can be selected. + // TODO: should this be what we do for all find inputs? Or maybe some _other_ API + // on findInput to change it to readonly? + this.findInput.inputBox.inputElement.toggleAttribute('readonly', !enabled); + // TODO: styles of the quick pick need to be moved to the CSS instead of being in line + // so things like this can be done in CSS + // this.findInput.inputBox.inputElement.classList.toggle('disabled', !enabled); } set toggles(toggles: Toggle[] | undefined) {