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
This commit is contained in:
Aasim Khan
2021-01-07 23:25:21 -08:00
committed by GitHub
parent e7fb44b3a2
commit 5d1b328866
14 changed files with 67 additions and 17 deletions

View File

@@ -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 {