Fixing the checked variable in radio buttons (#13909)

* Fixing the checked variable in radio buttons

* Emitting the checked state of radio button.

* Adding onChanged event to radioButtons (exposing it)
Deprecating onClick event for radioButtons
Fixing radio button stubs

* Made some type fixes

* Firing event in checked event setter

* updating azdata-test to 1.1 in arc extension

* Some logic fixes in checked setter

* added proper typings and updated package version for azdata-data

* Renamed the event to onDidChangeCheckedState

* Fixed deprecation message

* Fixed broken Schema compare stubs

src/sql/azdata.d.ts

@@ -3495,6 +3495,7 @@ declare module 'azdata' {
 
 	export interface RadioButtonComponent extends Component, RadioButtonProperties {
 		/**
+		 * @deprecated use onDidChangeCheckedState event instead
 		 * An event called when the radio button is clicked
 		 */
 		onDidClick: vscode.Event<any>;

src/sql/azdata.proposed.d.ts

@@ -274,6 +274,13 @@ declare module 'azdata' {
 		showLinkIcon?: boolean;
 	}
 
+	export interface RadioButtonComponent {
+		/**
+		 * An event called when the value of radio button changes
+		 */
+		onDidChangeCheckedState: vscode.Event<boolean>;
+	}
+
 	export interface DeclarativeTableColumn {
 		headerCssStyles?: CssStyles;
 		rowCssStyles?: CssStyles;

src/sql/base/browser/ui/radioButton/radioButton.ts

@@ -18,7 +18,10 @@ export class RadioButton extends Widget {
 	private inputElement: HTMLInputElement;
 	private _onClicked = new Emitter<void>();
 	public readonly onClicked: Event<void> = this._onClicked.event;
+	private _onChangedCheckedState = new Emitter<boolean>();
+	public readonly onDidChangeCheckedState: Event<boolean> = this._onChangedCheckedState.event;
 	private _label: HTMLSpanElement;
+	private _internalCheckedStateTracker: boolean = false;
 
 	constructor(container: HTMLElement, opts: IRadioButtonOptions) {
 		super();
@@ -33,7 +36,18 @@ export class RadioButton extends Widget {
 		this.label = opts.label;
 		this.enabled = opts.enabled || true;
 		this.checked = opts.checked || false;
-		this.onclick(this.inputElement, () => this._onClicked.fire());
+		this.onclick(this.inputElement, () => {
+			this._onClicked.fire();
+			if (this.name) {
+				const buttonGroup = document.getElementsByName(this.name);
+				buttonGroup.forEach((button) => {
+					const event = document.createEvent('HTMLEvents');
+					event.initEvent('change', true, true);
+					button.dispatchEvent(event);
+				});
+			}
+		});
+		this.inputElement.addEventListener('change', () => this.checked = this.inputElement.checked);
 
 		container.appendChild(this.inputElement);
 		container.appendChild(this._label);
@@ -60,7 +74,11 @@ export class RadioButton extends Widget {
 	}
 
 	public set checked(val: boolean) {
-		this.inputElement.checked = val;
+		if (this.inputElement.checked !== this._internalCheckedStateTracker) {
+			this.inputElement.checked = val;
+			this._internalCheckedStateTracker = val;
+			this._onChangedCheckedState.fire(this.checked);
+		}
 	}
 
 	public get checked(): boolean {

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

@@ -1271,6 +1271,7 @@ class RadioButtonWrapper extends ComponentWrapper implements azdata.RadioButtonC
 		super(proxy, handle, ModelComponentTypes.RadioButton, id);
 		this.properties = {};
 		this._emitterMap.set(ComponentEventType.onDidClick, new Emitter<any>());
+		this._emitterMap.set(ComponentEventType.onDidChange, new Emitter<boolean>());
 	}
 
 	public get name(): string {
@@ -1304,6 +1305,11 @@ class RadioButtonWrapper extends ComponentWrapper implements azdata.RadioButtonC
 		let emitter = this._emitterMap.get(ComponentEventType.onDidClick);
 		return emitter && emitter.event;
 	}
+
+	public get onDidChangeCheckedState(): vscode.Event<boolean> {
+		let emitter = this._emitterMap.get(ComponentEventType.onDidChange);
+		return emitter && emitter.event;
+	}
 }
 
 class TextComponentWrapper extends ComponentWrapper implements azdata.TextComponentProperties {

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

@@ -51,6 +51,14 @@ export default class RadioButtonComponent extends ComponentBase<azdata.RadioButt
 					args: e
 				});
 			}));
+
+			this._register(this._input.onDidChangeCheckedState(e => {
+				this.checked = e;
+				this.fireEvent({
+					eventType: ComponentEventType.onDidChange,
+					args: e
+				});
+			}));
 		}
 		this.baseInit();
 	}