Merge pull request #592 from cocopon/prevent-text-selection

Prevent unwanted text selection
cocopon · Dec 22, 2023 · e1cd989 · e1cd989
2 parents d8bda34 + 024df76
commit e1cd989
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 4 deletions.
diff --git a/packages/core/src/input-binding/boolean/controller/checkbox.ts b/packages/core/src/input-binding/boolean/controller/checkbox.ts
@@ -24,6 +24,7 @@ export class CheckboxController
 
 	constructor(doc: Document, config: Config) {
 		this.onInputChange_ = this.onInputChange_.bind(this);
+		this.onLabelMouseDown_ = this.onLabelMouseDown_.bind(this);
 
 		this.value = config.value;
 		this.viewProps = config.viewProps;
@@ -33,10 +34,22 @@ export class CheckboxController
 			viewProps: this.viewProps,
 		});
 		this.view.inputElement.addEventListener('change', this.onInputChange_);
+		this.view.labelElement.addEventListener(
+			'mousedown',
+			this.onLabelMouseDown_,
+		);
 	}
 
-	private onInputChange_(e: Event): void {
-		const inputElem: HTMLInputElement = forceCast(e.currentTarget);
+	private onInputChange_(ev: Event): void {
+		const inputElem: HTMLInputElement = forceCast(ev.currentTarget);
 		this.value.rawValue = inputElem.checked;
+		ev.preventDefault();
+		ev.stopPropagation();
+	}
+
+	private onLabelMouseDown_(ev: MouseEvent): void {
+		// Prevent unwanted text selection
+		// https://github.com/cocopon/tweakpane/issues/545
+		ev.preventDefault();
 	}
 }
diff --git a/packages/core/src/input-binding/boolean/view/checkbox.ts b/packages/core/src/input-binding/boolean/view/checkbox.ts
@@ -17,6 +17,7 @@ const cn = ClassName('ckb');
 export class CheckboxView implements View {
 	public readonly element: HTMLElement;
 	public readonly inputElement: HTMLInputElement;
+	public readonly labelElement: HTMLLabelElement;
 	public readonly value: Value<boolean>;
 
 	constructor(doc: Document, config: Config) {
@@ -29,17 +30,18 @@ export class CheckboxView implements View {
 		const labelElem = doc.createElement('label');
 		labelElem.classList.add(cn('l'));
 		this.element.appendChild(labelElem);
+		this.labelElement = labelElem;
 
 		const inputElem = doc.createElement('input');
 		inputElem.classList.add(cn('i'));
 		inputElem.type = 'checkbox';
-		labelElem.appendChild(inputElem);
+		this.labelElement.appendChild(inputElem);
 		this.inputElement = inputElem;
 		config.viewProps.bindDisabled(this.inputElement);
 
 		const wrapperElem = doc.createElement('div');
 		wrapperElem.classList.add(cn('w'));
-		labelElem.appendChild(wrapperElem);
+		this.labelElement.appendChild(wrapperElem);
 
 		const markElem = createSvgIconElement(doc, 'check');
 		wrapperElem.appendChild(markElem);