fix checkbox and radio button click issue (#14965)

This commit is contained in:
Alan Ren
2021-04-05 10:11:39 -07:00
committed by GitHub
parent 4dc3999f46
commit 6b855a9776
2 changed files with 10 additions and 3 deletions

View File

@@ -8,6 +8,7 @@ import 'vs/css!./media/checkbox';
import { Color } from 'vs/base/common/color';
import { Event, Emitter } from 'vs/base/common/event';
import { Widget } from 'vs/base/browser/ui/widget';
import { generateUuid } from 'vs/base/common/uuid';
export interface ICheckboxOptions {
label: string;
@@ -31,10 +32,11 @@ export class Checkbox extends Widget {
constructor(container: HTMLElement, opts: ICheckboxOptions) {
super();
const id = generateUuid();
this._el = document.createElement('input');
this._el.type = 'checkbox';
this._el.style.verticalAlign = 'middle';
this._el.id = id;
if (opts.ariaLabel) {
this.ariaLabel = opts.ariaLabel;
@@ -45,8 +47,9 @@ export class Checkbox extends Widget {
});
this._label = document.createElement('span');
this._label = document.createElement('label');
this._label.style.verticalAlign = 'middle';
this._label.setAttribute('for', id);
this.label = opts.label;
this.enabled = opts.enabled || true;

View File

@@ -6,6 +6,7 @@
import { Event, Emitter } from 'vs/base/common/event';
import { Widget } from 'vs/base/browser/ui/widget';
import { withNullAsUndefined } from 'vs/base/common/types';
import { generateUuid } from 'vs/base/common/uuid';
export interface IRadioButtonOptions {
label: string;
@@ -25,13 +26,16 @@ export class RadioButton extends Widget {
constructor(container: HTMLElement, opts: IRadioButtonOptions) {
super();
const id = generateUuid();
this.inputElement = document.createElement('input');
this.inputElement.type = 'radio';
this.inputElement.style.verticalAlign = 'middle';
this.inputElement.style.margin = '3px';
this.inputElement.id = id;
this._label = document.createElement('span');
this._label = document.createElement('label');
this._label.style.verticalAlign = 'middle';
this._label.setAttribute('for', id);
this.label = opts.label;
this.enabled = opts.enabled || true;