diff --git a/src/vs/base/browser/ui/inputbox/inputBox.ts b/src/vs/base/browser/ui/inputbox/inputBox.ts index 86c5c6db001..28a4bb54c38 100644 --- a/src/vs/base/browser/ui/inputbox/inputBox.ts +++ b/src/vs/base/browser/ui/inputbox/inputBox.ts @@ -9,6 +9,7 @@ import 'vs/css!./inputBox'; import * as Bal from 'vs/base/browser/browser'; import * as dom from 'vs/base/browser/dom'; import * as browser from 'vs/base/browser/browserService'; +import {IDisposable, disposeAll} from 'vs/base/common/lifecycle'; import {IHTMLContentElement} from 'vs/base/common/htmlContent'; import {renderHtml} from 'vs/base/browser/htmlContentRenderer'; import {IAction} from 'vs/base/common/actions'; @@ -70,6 +71,7 @@ export class InputBox extends Widget { private showValidationMessage: boolean; private state = 'idle'; private cachedHeight: number; + private disposables: IDisposable[] = []; private _onDidChange = this._register(new Emitter()); public onDidChange: Event = this._onDidChange.event; @@ -102,6 +104,10 @@ export class InputBox extends Widget { this.input.setAttribute('autocorrect', 'off'); this.input.setAttribute('autocapitalize', 'off'); this.input.setAttribute('spellcheck', 'false'); + this.disposables.push( + dom.addDisposableListener(this.input, dom.EventType.FOCUS, () => dom.addClass(this.element, 'synthetic-focus')), + dom.addDisposableListener(this.input, dom.EventType.BLUR, () => dom.removeClass(this.element, 'synthetic-focus'))); + if (this.options.flexibleHeight) { this.mirror = dom.append(wrapper, $('div.mirror')); @@ -356,6 +362,7 @@ export class InputBox extends Widget { public dispose(): void { this._hideMessage(); + this.disposables = disposeAll(this.disposables); this.element = null; this.input = null; diff --git a/src/vs/workbench/electron-browser/media/shell.css b/src/vs/workbench/electron-browser/media/shell.css index 3d18e359ec5..ec04ad17e2a 100644 --- a/src/vs/workbench/electron-browser/media/shell.css +++ b/src/vs/workbench/electron-browser/media/shell.css @@ -49,8 +49,12 @@ /* START Keyboard Focus Indication Styles */ +.monaco-shell .synthetic-focus :focus { + outline: none !important; +} + .monaco-shell.vs [tabindex="0"]:focus, -.monaco-shell.vs select:focus, +.monaco-shell.vs .synthetic-focus, .monaco-shell.vs input[type="button"]:focus, .monaco-shell.vs input[type="submit"]:focus, .monaco-shell.vs input[type="text"]:focus, .monaco-shell.vs textarea:focus, @@ -61,6 +65,7 @@ } .monaco-shell.vs-dark [tabindex="0"]:focus, +.monaco-shell.vs-dark .synthetic-focus, .monaco-shell.vs-dark select:focus, .monaco-shell.vs-dark input[type="button"]:focus, .monaco-shell.vs-dark input[type="submit"]:focus, @@ -72,6 +77,7 @@ } .monaco-shell.hc-black [tabindex="0"]:focus, +.monaco-shell.hc-black .synthetic-focus, .monaco-shell.hc-black select:focus, .monaco-shell.hc-black input[type="button"]:focus, .monaco-shell.hc-black input[type="submit"]:focus,