Merge pull request #2497 from Microsoft/joh/#2491

fix #2491

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<string>());
 	public onDidChange: Event<string> = 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;

src/vs/workbench/electron-browser/media/shell.css

@@ -50,7 +50,7 @@
 /* START Keyboard Focus Indication Styles */
 
 .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 +61,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 +73,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,
@@ -104,6 +106,10 @@
 	outline-offset: -2px;
 }
 
+.monaco-shell .synthetic-focus :focus {
+	outline: 0 !important; /* elements within widgets that draw synthetic-focus should never show focus */
+}
+
 .monaco-shell .monaco-inputbox.info input[type="text"]:focus,
 .monaco-shell .monaco-inputbox.warning input[type="text"]:focus,
 .monaco-shell .monaco-inputbox.error input[type="text"]:focus {