From 024df7643b726f88abac7a9410d1774d528709d0 Mon Sep 17 00:00:00 2001
From: cocopon <cocopon@me.com>
Date: Fri, 22 Dec 2023 22:08:30 +0900
Subject: [PATCH] Prevent unwanted text selection, #545

---
 .../boolean/controller/checkbox.ts              | 17 +++++++++++++++--
 .../src/input-binding/boolean/view/checkbox.ts  |  6 ++++--
 2 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/packages/core/src/input-binding/boolean/controller/checkbox.ts b/packages/core/src/input-binding/boolean/controller/checkbox.ts
index 6879c6a5..aca65855 100644
--- 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
index dad04922..695caa69 100644
--- 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);