Add focus function for modelview components (#8348)

* Add focus method for modelview components

* Remove focus properties from table and radiobutton

* Fix break

src/sql/workbench/api/browser/mainThreadModelView.ts

@@ -97,6 +97,10 @@ export class MainThreadModelView extends Disposable implements MainThreadModelVi
 		return new Promise(resolve => this.execModelViewAction(handle, (modelView) => resolve(modelView.validate(componentId))));
 	}
 
+	$focus(handle: number, componentId: string): Thenable<void> {
+		return new Promise(resolve => this.execModelViewAction(handle, (modelView) => resolve(modelView.focus(componentId))));
+	}
+
 	private runCustomValidations(handle: number, componentId: string): Thenable<boolean> {
 		return this._proxy.$runCustomValidations(handle, componentId);
 	}

src/sql/workbench/api/common/extHostModelView.ts

@@ -711,6 +711,10 @@ class ComponentWrapper implements azdata.Component {
 	public get valid(): boolean {
 		return this._valid;
 	}
+
+	public focus() {
+		return this._proxy.$focus(this._handle, this._id);
+	}
 }
 
 class ComponentWithIconWrapper extends ComponentWrapper {
@@ -1144,12 +1148,6 @@ class RadioButtonWrapper extends ComponentWrapper implements azdata.RadioButtonC
 	public set checked(v: boolean) {
 		this.setProperty('checked', v);
 	}
-	public get focused(): boolean {
-		return this.properties['focused'];
-	}
-	public set focused(v: boolean) {
-		this.setProperty('focused', v);
-	}
 
 	public get onDidClick(): vscode.Event<any> {
 		let emitter = this._emitterMap.get(ComponentEventType.onDidClick);
@@ -1266,13 +1264,6 @@ class TableComponentWrapper extends ComponentWrapper implements azdata.TableComp
 		this.setProperty('moveFocusOutWithTab', v);
 	}
 
-	public get focused(): boolean {
-		return this.properties['focused'];
-	}
-	public set focused(v: boolean) {
-		this.setProperty('focused', v);
-	}
-
 	public get updateCells(): azdata.TableCell[] {
 		return this.properties['updateCells'];
 	}

src/sql/workbench/api/common/sqlExtHost.protocol.ts

@@ -736,6 +736,7 @@ export interface MainThreadModelViewShape extends IDisposable {
 	$validate(handle: number, componentId: string): Thenable<boolean>;
 	$setDataProvider(handle: number, componentId: string): Thenable<void>;
 	$refreshDataProvider(handle: number, componentId: string, item?: any): Thenable<void>;
+	$focus(handle: number, componentId: string): Thenable<void>;
 }
 
 export interface ExtHostObjectExplorerShape {

src/sql/workbench/browser/modelComponents/button.component.ts

@@ -125,6 +125,10 @@ export default class ButtonComponent extends ComponentWithIconBase implements IC
 		this._changeRef.detectChanges();
 	}
 
+	public focus(): void {
+		this._button.focus();
+	}
+
 	protected updateIcon() {
 		if (this.iconPath) {
 			if (!this._iconClass) {

src/sql/workbench/browser/modelComponents/checkbox.component.ts

@@ -105,4 +105,8 @@ export default class CheckBoxComponent extends ComponentBase implements ICompone
 	private set label(newValue: string) {
 		this.setPropertyFromUI<azdata.CheckBoxProperties, string>((properties, label) => { properties.label = label; }, newValue);
 	}
+
+	public focus(): void {
+		this._input.focus();
+	}
 }

src/sql/workbench/browser/modelComponents/componentBase.ts

@@ -262,6 +262,12 @@ export abstract class ComponentBase extends Disposable implements IComponent, On
 		});
 	}
 
+	public focus(): void {
+		// Default is to just focus on the native element, components should override this if they
+		// want their own behavior (such as focusing a particular child element)
+		(<HTMLElement>this._el.nativeElement).focus();
+	}
+
 	protected onkeydown(domNode: HTMLElement, listener: (e: IKeyboardEvent) => void): void {
 		this._register(addDisposableListener(domNode, EventType.KEY_DOWN, (e: KeyboardEvent) => listener(new StandardKeyboardEvent(e))));
 	}

src/sql/workbench/browser/modelComponents/inputbox.component.ts

@@ -325,4 +325,8 @@ export default class InputBoxComponent extends ComponentBase implements ICompone
 	public set stopEnterPropagation(newValue: boolean) {
 		this.setPropertyFromUI<azdata.InputBoxProperties, boolean>((props, value) => props.stopEnterPropagation = value, newValue);
 	}
+
+	public focus(): void {
+		this.inputElement.focus();
+	}
 }

src/sql/workbench/browser/modelComponents/interfaces.ts

@@ -27,6 +27,7 @@ export interface IComponent extends IDisposable {
 	validate(): Thenable<boolean>;
 	setDataProvider(handle: number, componentId: string, context: any): void;
 	refreshDataProvider(item: any): void;
+	focus(): void;
 }
 
 export const COMPONENT_CONFIG = new InjectionToken<IComponentConfig>('component_config');

src/sql/workbench/browser/modelComponents/radioButton.component.ts

@@ -75,7 +75,6 @@ export default class RadioButtonComponent extends ComponentBase implements IComp
 		this._input.label = this.label;
 		this._input.enabled = this.enabled;
 		this._input.checked = this.checked;
-		this.focused ? this._input.focus() : this._input.blur();
 	}
 
 	// CSS-bound properties
@@ -116,11 +115,8 @@ export default class RadioButtonComponent extends ComponentBase implements IComp
 		this.setPropertyFromUI<azdata.RadioButtonProperties, string>((properties, label) => { properties.name = label; }, newValue);
 	}
 
-	public get focused(): boolean {
-		return this.getPropertyOrDefault<azdata.RadioButtonProperties, boolean>((props) => props.focused, false);
+	public focus(): void {
+		this._input.focus();
 	}
 
-	public set focused(newValue: boolean) {
-		this.setPropertyFromUI<azdata.RadioButtonProperties, boolean>((properties, value) => { properties.focused = value; }, newValue);
-	}
 }

src/sql/workbench/browser/modelComponents/table.component.ts

@@ -252,10 +252,6 @@ export default class TableComponent extends ComponentBase implements IComponent,
 			this._table.ariaRole = this.ariaRole;
 		}
 
-		if (this.focused) {
-			this._table.focus();
-		}
-
 		if (this.updateCells !== undefined) {
 			this.updateTableCells(this.updateCells);
 		}
@@ -368,14 +364,6 @@ export default class TableComponent extends ComponentBase implements IComponent,
 		return this.getPropertyOrDefault<azdata.TableComponentProperties, boolean>((props) => props.moveFocusOutWithTab, false);
 	}
 
-	public get focused(): boolean {
-		return this.getPropertyOrDefault<azdata.RadioButtonProperties, boolean>((props) => props.focused, false);
-	}
-
-	public set focused(newValue: boolean) {
-		this.setPropertyFromUI<azdata.RadioButtonProperties, boolean>((properties, value) => { properties.focused = value; }, newValue);
-	}
-
 	public get updateCells(): azdata.TableCell[] {
 		return this.getPropertyOrDefault<azdata.TableComponentProperties, azdata.TableCell[]>((props) => props.updateCells, undefined);
 	}

src/sql/workbench/browser/modelComponents/viewBase.ts

@@ -146,4 +146,8 @@ export abstract class ViewBase extends AngularDisposable implements IModelView {
 	public setDataProvider(handle: number, componentId: string, context: any): any {
 		return this.queueAction(componentId, (component) => component.setDataProvider(handle, componentId, context));
 	}
+
+	public focus(componentId: string): void {
+		return this.queueAction(componentId, (component) => component.focus());
+	}
 }