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.
This commit is contained in:
Tyler James Leonhardt
2022-12-16 13:24:12 -08:00
committed by GitHub
parent f4c0b8064b
commit fa76f1eb07
2 changed files with 9 additions and 4 deletions

View File

@@ -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();
}
}
}

View File

@@ -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) {