Fixed issue causing text overlap in sort select box

[bookstack] / resources / assets / js / components / toggle-switch.js

diff --git a/resources/assets/js/components/toggle-switch.js b/resources/assets/js/components/toggle-switch.js
index 957a41642141c398b3016110eb484d05e382ac84..b9b96afc5d07728d992e9cd49eab9e29a6df1f2a 100644 (file)
--- a/resources/assets/js/components/toggle-switch.js
+++ b/resources/assets/js/components/toggle-switch.js
@@ -3,15 +3,19 @@ class ToggleSwitch {
 
     constructor(elem) {
         this.elem = elem;
 
     constructor(elem) {
         this.elem = elem;

-        this.input = elem.querySelector('input');
+        this.input = elem.querySelector('input[type=hidden]');
+        this.checkbox = elem.querySelector('input[type=checkbox]');

 
 

-        this.elem.onclick = this.onClick.bind(this);
+        this.checkbox.addEventListener('change', this.stateChange.bind(this));

     }
 
     }
 

-    onClick(event) {
-        let checked = this.input.value !== 'true';
-        this.input.value = checked ? 'true' : 'false';
-        checked ? this.elem.classList.add('active') : this.elem.classList.remove('active');
+    stateChange() {
+        this.input.value = (this.checkbox.checked ? 'true' : 'false');
+
+        // Dispatch change event from hidden input so they can be listened to
+        // like a normal checkbox.
+        const changeEvent = new Event('change');
+        this.input.dispatchEvent(changeEvent);

     }
 
 }
     }
 
 }