Fix #63906

src/vs/workbench/browser/parts/views/customView.ts

@@ -363,8 +363,8 @@ export class CustomTreeView extends Disposable implements ITreeView {
 
 			// Pass Focus to Viewer
 			this.tree.domFocus();
-		} else if (this._messageValue) {
-			this.messageElement.focus();
+		} else {
+			this.domNode.focus();
 		}
 	}
 
@@ -375,7 +375,6 @@ export class CustomTreeView extends Disposable implements ITreeView {
 	private create() {
 		this.domNode = DOM.$('.tree-explorer-viewlet-tree-view');
 		this.messageElement = DOM.append(this.domNode, DOM.$('.message'));
-		this.messageElement.setAttribute('tabindex', '0');
 		this.treeContainer = DOM.append(this.domNode, DOM.$('.customview-tree'));
 		const focusTracker = this._register(DOM.trackFocus(this.domNode));
 		this._register(focusTracker.onDidFocus(() => this.focused = true));
@@ -395,7 +394,7 @@ export class CustomTreeView extends Disposable implements ITreeView {
 		this._register(this.tree.onDidExpandItem(e => this._onDidExpandItem.fire(e.item.getElement())));
 		this._register(this.tree.onDidCollapseItem(e => this._onDidCollapseItem.fire(e.item.getElement())));
 		this._register(this.tree.onDidChangeSelection(e => this._onDidChangeSelection.fire(e.selection)));
-		this.tree.setInput(this.root);
+		this.tree.setInput(this.root).then(() => this.updateContentAreas());
 	}
 
 	private updateMessage(): void {
@@ -515,8 +514,10 @@ export class CustomTreeView extends Disposable implements ITreeView {
 
 	private doRefresh(elements: ITreeItem[]): Promise<void> {
 		if (this.tree) {
+			DOM.removeClass(this.treeContainer, 'hasChildren');
 			return Promise.all(elements.map(e => this.tree.refresh(e)))
 				.then(() => {
+					this.updateContentAreas();
 					if (this.focused) {
 						this.focus();
 					}
@@ -525,6 +526,16 @@ export class CustomTreeView extends Disposable implements ITreeView {
 		return Promise.resolve(null);
 	}
 
+	private updateContentAreas(): void {
+		if (this.root.children && this.root.children.length) {
+			DOM.addClass(this.treeContainer, 'hasChildren');
+			this.domNode.removeAttribute('tabindex');
+		} else {
+			DOM.removeClass(this.treeContainer, 'hasChildren');
+			this.domNode.setAttribute('tabindex', '0');
+		}
+	}
+
 	private onSelection({ payload }: any): void {
 		if (payload && (!!payload.didClickOnTwistie || payload.source === 'api')) {
 			return;

src/vs/workbench/browser/parts/views/media/views.css

@@ -50,6 +50,10 @@
 	display: none;
 }
 
+.monaco-workbench .tree-explorer-viewlet-tree-view {
+	height: 100%;
+}
+
 .monaco-workbench .tree-explorer-viewlet-tree-view .message {
 	display: flex;
 	padding: 4px 12px 0px 18px;
@@ -74,6 +78,10 @@
 	height: 100%;
 }
 
+.monaco-workbench .tree-explorer-viewlet-tree-view .customview-tree:not(.hasChildren) {
+	display: none;
+}
+
 .customview-tree.file-icon-themable-tree .monaco-tree-row .content.align-icon-with-twisty::before {
 	display: none;
 }