Happy needs to only initalise global callbacks ONCE or bind them to the actually inserted elements. I chose to, for the sake of least changes, only add the callback once globally.

Moreover, the happy-checkbox selector selects the new fancy checkbox, not the native checkbox like the code assumes.

Also swaps the order of operations so any callback bound on the native input which may want to change/check the state of the happy checkbox is in a consistent, new state.

Author: PeAd

assets/integrations/happy.ts

@@ -17,11 +17,9 @@ export class Happy {
 	};
 
 	init() {
-		if(!this.sheet){
-			const styleElement = new CSSStyleSheet();
-			styleElement.replaceSync(happyStyles);
-			document.adoptedStyleSheets.push(styleElement);
-			this.sheet = styleElement;
+
+		if(!this.sheet) {
+			this.firstInit()
 		}
 		this.removeBySelector(".happy-radio");
 		this.removeBySelector(".happy-checkbox");
@@ -30,6 +28,24 @@ export class Happy {
 		this.initCheckbox();
 	}
 
+	firstInit(){
+		const styleElement = new CSSStyleSheet();
+		styleElement.replaceSync(happyStyles);
+		document.adoptedStyleSheets.push(styleElement);
+		this.sheet = styleElement;
+
+		/**
+		 * The first init call, adds handlers for fancy looking checkboxes. The callback neds only be added once.
+		 */
+		document.addEventListener("click", this.checkCheckboxStateOnClick.bind(this));
+		document.addEventListener("change", this.checkCheckboxStateOnChange.bind(this));
+
+		/**
+		 * Set aciton functionality for native change of radios
+		 */
+		document.addEventListener("change", this.radioOnChange.bind(this));
+	}
+
 	/**
 	 * @deprecated
 	 */
@@ -95,15 +111,11 @@ export class Happy {
 			 * Init state
 			 */
 			this.checkRadioState(input);
-
-			/**
-			 * Set aciton functionality for native change
-			 */
-			document.addEventListener("change", this.radioOnChange.bind(this));
 		});
 	}
 
 	initCheckbox() {
+
 		document.querySelectorAll<HTMLInputElement>("input[type=checkbox].happy").forEach(input => {
 			/**
 			 * Paste happy component into html
@@ -128,12 +140,6 @@ export class Happy {
 			 * Init state
 			 */
 			this.checkCheckboxState(input);
-
-			/**
-			 * Set action functionality for click || native change
-			 */
-			document.addEventListener("click", this.checkCheckboxStateOnClick.bind(this));
-			document.addEventListener("change", this.checkCheckboxStateOnChange.bind(this));
 		});
 	}
 
@@ -149,7 +155,6 @@ export class Happy {
 				: target instanceof SVGGraphicsElement
 					? target.closest("svg")?.parentNode
 					: target;
-
 		if (!(happyInput instanceof HTMLElement) || !happyInput.classList.contains("happy-checkbox")) {
 			return;
 		}
@@ -160,14 +165,13 @@ export class Happy {
 		const value = happyInput.getAttribute("data-value");
 
 		const input = document.querySelector(
-			`.happy-checkbox[data-name="${name}"]` + (!!value ? `[value="${value}"]` : "")
+			`input[type=checkbox].happy[name="${name}"]` + (!!value ? `[value="${value}"]` : "")
 		);
 		if (!(input instanceof HTMLInputElement)) return;
 
 		const checked = happyInput.classList.contains("active");
-
-		input.checked = !checked;
 		checked ? happyInput.classList.remove("active") : happyInput.classList.add("active");
+		input.checked = !checked;
 	}
 
 	checkCheckboxStateOnChange({target}: Event) {