From: Jo-Philipp Wich <jo@mein.io>
Date: Mon, 29 Mar 2021 09:24:59 +0000 (+0200)
Subject: luci-base: ui.js: fix UICheckbox widget operation when tooltips are set
X-Git-Url: http://git.lede-project.org./?a=commitdiff_plain;h=adcc2ef446cc2efa0eb81764b7c7ede3ba6a5bc2;p=project%2Fluci.git

luci-base: ui.js: fix UICheckbox widget operation when tooltips are set

When a tooltip is rendered for a checkbox widget, an additional node is
placed after the checkbox label element, breaking DOM selectors in
bind(), isChecked(), setValue().

Apparently the functionality was never actually tested.

Fixes: #4938
Fixes: e951236e3 ("luci-base: add tooltip handling")
Signed-off-by: Jo-Philipp Wich <jo@mein.io>
(cherry picked from commit 95b5c6cd6464d11d6baa22bcf2c9469847353813)
---

diff --git a/modules/luci-base/htdocs/luci-static/resources/ui.js b/modules/luci-base/htdocs/luci-static/resources/ui.js
index c8ebef6691..3a991be9ac 100644
--- a/modules/luci-base/htdocs/luci-static/resources/ui.js
+++ b/modules/luci-base/htdocs/luci-static/resources/ui.js
@@ -633,8 +633,9 @@ var UICheckbox = UIElement.extend(/** @lends LuCI.ui.Checkbox.prototype */ {
 	bind: function(frameEl) {
 		this.node = frameEl;
 
-		this.setUpdateEvents(frameEl.lastElementChild.previousElementSibling, 'click', 'blur');
-		this.setChangeEvents(frameEl.lastElementChild.previousElementSibling, 'change');
+		var input = frameEl.querySelector('input[type="checkbox"]');
+		this.setUpdateEvents(input, 'click', 'blur');
+		this.setChangeEvents(input, 'change');
 
 		dom.bindClassInstance(frameEl, this);
 
@@ -650,7 +651,7 @@ var UICheckbox = UIElement.extend(/** @lends LuCI.ui.Checkbox.prototype */ {
 	 * Returns `true` when the checkbox is currently checked, otherwise `false`.
 	 */
 	isChecked: function() {
-		return this.node.lastElementChild.previousElementSibling.checked;
+		return this.node.querySelector('input[type="checkbox"]').checked;
 	},
 
 	/** @override */
@@ -662,7 +663,7 @@ var UICheckbox = UIElement.extend(/** @lends LuCI.ui.Checkbox.prototype */ {
 
 	/** @override */
 	setValue: function(value) {
-		this.node.lastElementChild.previousElementSibling.checked = (value == this.options.value_enabled);
+		this.node.querySelector('input[type="checkbox"]').checked = (value == this.options.value_enabled);
 	}
 });