diff --git a/src/vs/base/browser/ui/list/list.css b/src/vs/base/browser/ui/list/list.css index aee0e716eae..ea1fb7a6591 100644 --- a/src/vs/base/browser/ui/list/list.css +++ b/src/vs/base/browser/ui/list/list.css @@ -48,6 +48,7 @@ .hc-black .monaco-list-row:hover { outline: 1px dashed #f38518; background: transparent; } /* Focus */ +.monaco-list.element-focused { outline: 0 !important; } .monaco-list-row.focused { background-color: #DCEBFC; } .vs-dark .monaco-list-row.focused { background-color: #073655; } .hc-black .monaco-list-row.focused { outline: 1px dotted #f38518; background: transparent } diff --git a/src/vs/base/browser/ui/list/listWidget.ts b/src/vs/base/browser/ui/list/listWidget.ts index 901ef728da6..9b46f1b84eb 100644 --- a/src/vs/base/browser/ui/list/listWidget.ts +++ b/src/vs/base/browser/ui/list/listWidget.ts @@ -212,6 +212,7 @@ export class List implements IDisposable { private eventBufferer: EventBufferer; private view: ListView; private controller: Controller; + private disposables: IDisposable[]; get onFocusChange(): Event> { return this.eventBufferer.wrapEvent(mapEvent(this.focus.onChange, e => this.toListEvent(e))); @@ -244,8 +245,10 @@ export class List implements IDisposable { this.view.domNode.setAttribute('role', 'listbox'); this.view.domNode.tabIndex = 0; this.controller = new Controller(this, this.view); + this.disposables = [this.focus, this.selection, this.view, this.controller]; this._onDOMFocus = domEvent(this.view.domNode, 'focus'); + this.onFocusChange(this._onFocusChange, this, this.disposables); } splice(start: number, deleteCount: number, ...elements: T[]): void { @@ -411,9 +414,11 @@ export class List implements IDisposable { return { indexes, elements: indexes.map(i => this.view.element(i)) }; } + private _onFocusChange(): void { + DOM.toggleClass(this.view.domNode, 'element-focused', this.focus.get().length > 0); + } + dispose(): void { - this.view = dispose(this.view); - this.focus = dispose(this.focus); - this.selection = dispose(this.selection); + this.disposables = dispose(this.disposables); } }