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/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());
+	}
 }