Include list/tree in tab order and cycle within QuickInput/Open widget (fixes #51850)

src/vs/base/parts/quickopen/browser/quickOpenWidget.ts

@@ -152,6 +152,15 @@ export class QuickOpenWidget extends Disposable implements IModelProvider {
 					DOM.EventHelper.stop(e, true);
 
 					this.hide(HideReason.CANCELED);
+				} else if (keyboardEvent.keyCode === KeyCode.Tab && !keyboardEvent.altKey && !keyboardEvent.ctrlKey && !keyboardEvent.metaKey) {
+					const stops = e.currentTarget.querySelectorAll('input, .monaco-tree, .monaco-tree-row.focused .action-label.icon');
+					if (keyboardEvent.shiftKey && keyboardEvent.target === stops[0]) {
+						DOM.EventHelper.stop(e, true);
+						stops[stops.length - 1].focus();
+					} else if (!keyboardEvent.shiftKey && keyboardEvent.target === stops[stops.length - 1]) {
+						DOM.EventHelper.stop(e, true);
+						stops[0].focus();
+					}
 				}
 			})
 				.on(DOM.EventType.CONTEXT_MENU, (e: Event) => DOM.EventHelper.stop(e, true)) // Do this to fix an issue on Mac where the menu goes into the way
@@ -243,7 +252,7 @@ export class QuickOpenWidget extends Disposable implements IModelProvider {
 						horizontalScrollMode: ScrollbarVisibility.Hidden,
 						ariaLabel: nls.localize('treeAriaLabel', "Quick Picker"),
 						keyboardSupport: this.options.keyboardSupport,
-						preventRootFocus: true
+						preventRootFocus: false
 					}));
 
 				this.treeElement = this.tree.getHTMLElement();
@@ -348,7 +357,7 @@ export class QuickOpenWidget extends Disposable implements IModelProvider {
 			if (keyboardEvent.keyCode === KeyCode.DownArrow || keyboardEvent.keyCode === KeyCode.UpArrow || keyboardEvent.keyCode === KeyCode.PageDown || keyboardEvent.keyCode === KeyCode.PageUp) {
 				DOM.EventHelper.stop(e, true);
 				this.navigateInTree(keyboardEvent.keyCode, keyboardEvent.shiftKey);
-				this.inputBox.inputElement.focus();
+				this.treeElement.focus();
 			}
 		});
 		return this.builder.getHTMLElement();

src/vs/workbench/browser/parts/quickinput/quickInput.ts

@@ -849,18 +849,22 @@ export class QuickInputService extends Component implements IQuickInputService {
 					break;
 				case KeyCode.Tab:
 					if (!event.altKey && !event.ctrlKey && !event.metaKey) {
-						const inputs = [].slice.call(container.querySelectorAll('.action-label.icon'));
+						const selectors = ['.action-label.icon'];
 						if (container.classList.contains('show-checkboxes')) {
-							inputs.push(...[].slice.call(container.querySelectorAll('input')));
+							selectors.push('input');
 						} else {
-							inputs.push(...[].slice.call(container.querySelectorAll('input[type=text]')));
+							selectors.push('input[type=text]');
 						}
-						if (event.shiftKey && event.target === inputs[0]) {
+						if (this.ui.list.isDisplayed()) {
+							selectors.push('.monaco-list');
+						}
+						const stops = container.querySelectorAll<HTMLElement>(selectors.join(', '));
+						if (event.shiftKey && event.target === stops[0]) {
 							dom.EventHelper.stop(e, true);
-							inputs[inputs.length - 1].focus();
-						} else if (!event.shiftKey && event.target === inputs[inputs.length - 1]) {
+							stops[stops.length - 1].focus();
+						} else if (!event.shiftKey && event.target === stops[stops.length - 1]) {
 							dom.EventHelper.stop(e, true);
-							inputs[0].focus();
+							stops[0].focus();
 						}
 					}
 					break;