From f7a94879daa1ebc0afcb1c612e088521c9e7069a Mon Sep 17 00:00:00 2001
From: Saq Imtiaz <saq.imtiaz@gmail.com>
Date: Mon, 20 Nov 2023 17:00:46 +0100
Subject: [PATCH] Fixes refresh issues for checkbox and links widgets for data
 attributes (#7846)

* fix: refresh issues with checkbox and links widgets

* fix: indenting
---
 core/modules/widgets/checkbox.js              |  6 +++++
 core/modules/widgets/link.js                  |  6 +++++
 .../ButtonWidget-DataAttributes.tid           | 27 +++++++++++++++++++
 .../CheckboxWidget-DataAttributes.tid         | 22 +++++++++++++++
 .../LinkWidget-DataAttributes.tid             | 27 +++++++++++++++++++
 5 files changed, 88 insertions(+)
 create mode 100644 editions/test/tiddlers/tests/data/widgets/DataAttributes/ButtonWidget-DataAttributes.tid
 create mode 100644 editions/test/tiddlers/tests/data/widgets/DataAttributes/CheckboxWidget-DataAttributes.tid
 create mode 100644 editions/test/tiddlers/tests/data/widgets/DataAttributes/LinkWidget-DataAttributes.tid

diff --git a/core/modules/widgets/checkbox.js b/core/modules/widgets/checkbox.js
index 8189eb6d5..e07513b0a 100644
--- a/core/modules/widgets/checkbox.js
+++ b/core/modules/widgets/checkbox.js
@@ -330,6 +330,11 @@ CheckboxWidget.prototype.refresh = function(changedTiddlers) {
 				$tw.utils.removeClass(this.labelDomNode,"tc-checkbox-checked");
 			}
 		}
+		this.assignAttributes(this.inputDomNode,{
+			changedAttributes: changedAttributes,
+			sourcePrefix: "data-",
+			destPrefix: "data-"
+		});
 		return this.refreshChildren(changedTiddlers) || refreshed;
 	}
 };
@@ -337,3 +342,4 @@ CheckboxWidget.prototype.refresh = function(changedTiddlers) {
 exports.checkbox = CheckboxWidget;
 
 })();
+	
\ No newline at end of file
diff --git a/core/modules/widgets/link.js b/core/modules/widgets/link.js
index 9502353b9..0d89ee22d 100755
--- a/core/modules/widgets/link.js
+++ b/core/modules/widgets/link.js
@@ -143,6 +143,11 @@ LinkWidget.prototype.renderLink = function(parent,nextSibling) {
 			widget: this
 		});
 	}
+	// Assign data- attributes
+	this.assignAttributes(domNode,{
+		sourcePrefix: "data-",
+		destPrefix: "data-"
+	});
 	// Insert the link into the DOM and render any children
 	parent.insertBefore(domNode,nextSibling);
 	this.renderChildren(domNode,null);
@@ -222,3 +227,4 @@ LinkWidget.prototype.refresh = function(changedTiddlers) {
 exports.link = LinkWidget;
 
 })();
+	
\ No newline at end of file
diff --git a/editions/test/tiddlers/tests/data/widgets/DataAttributes/ButtonWidget-DataAttributes.tid b/editions/test/tiddlers/tests/data/widgets/DataAttributes/ButtonWidget-DataAttributes.tid
new file mode 100644
index 000000000..014e16b58
--- /dev/null
+++ b/editions/test/tiddlers/tests/data/widgets/DataAttributes/ButtonWidget-DataAttributes.tid
@@ -0,0 +1,27 @@
+title: Widgets/DataAttributes/ButtonWidget
+description: Data Attributes for ButtonWidget
+type: text/vnd.tiddlywiki-multiple
+tags: [[$:/tags/wiki-test-spec]]
+
+title: Output
+
+\whitespace trim
+<$button tag="div" class="myclass" data-title="mytiddler" style.color="red">
+my tiddler
+</$button>
+<$button tag="div" class="myclass" data-title={{Temp}} style.color={{{ [[Temp]get[color]] }}}>
+hello
+</$button>
++
+title: Actions
+
+<$action-setfield $tiddler="Temp" $field="text" $value="Title2" color="red"/>
++
+title: Temp
+color: black
+
+Title1
++
+title: ExpectedResult
+
+<p><div class="myclass" data-title="mytiddler" style="color:red;">my tiddler</div><div class="myclass" data-title="Title2" style="color:red;">hello</div></p>
\ No newline at end of file
diff --git a/editions/test/tiddlers/tests/data/widgets/DataAttributes/CheckboxWidget-DataAttributes.tid b/editions/test/tiddlers/tests/data/widgets/DataAttributes/CheckboxWidget-DataAttributes.tid
new file mode 100644
index 000000000..6d86daac7
--- /dev/null
+++ b/editions/test/tiddlers/tests/data/widgets/DataAttributes/CheckboxWidget-DataAttributes.tid
@@ -0,0 +1,22 @@
+title: Widgets/DataAttributes/CheckboxWidget
+description: Data Attributes for CheckboxWidget
+type: text/vnd.tiddlywiki-multiple
+tags: [[$:/tags/wiki-test-spec]]
+
+title: Output
+
+\whitespace trim
+<$checkbox tag="done" data-title={{Temp}} style.color={{{ [[Temp]get[color]] }}}> Is it done?</$checkbox>
++
+title: Actions
+
+<$action-setfield $tiddler="Temp" $field="text" $value="Title2" color="red"/>
++
+title: Temp
+color: black
+
+Title1
++
+title: ExpectedResult
+
+<p><label class="tc-checkbox "><input data-title="Title2" type="checkbox" style="color:red;"><span>Is it done?</span></label></p>
\ No newline at end of file
diff --git a/editions/test/tiddlers/tests/data/widgets/DataAttributes/LinkWidget-DataAttributes.tid b/editions/test/tiddlers/tests/data/widgets/DataAttributes/LinkWidget-DataAttributes.tid
new file mode 100644
index 000000000..17d330642
--- /dev/null
+++ b/editions/test/tiddlers/tests/data/widgets/DataAttributes/LinkWidget-DataAttributes.tid
@@ -0,0 +1,27 @@
+title: Widgets/DataAttributes/LinkWidget
+description: Data Attributes for LinkWidget
+type: text/vnd.tiddlywiki-multiple
+tags: [[$:/tags/wiki-test-spec]]
+
+title: Output
+
+\whitespace trim
+<$link data-id="mytiddler" style.color="red" to="Temp">
+link to Temp
+</$link>
+<$link tag="button" data-id={{Temp}} style.color={{{ [[Temp]get[color]] }}} to="SomeTiddler">
+some tiddler
+</$link>
++
+title: Actions
+
+<$action-setfield $tiddler="Temp" $field="text" $value="Title2" color="red"/>
++
+title: Temp
+color: black
+
+Title1
++
+title: ExpectedResult
+
+<p><a class="tc-tiddlylink tc-tiddlylink-resolves" data-id="mytiddler" href="#Temp" style="color:red;">link to Temp</a><button class="tc-tiddlylink tc-tiddlylink-missing" data-id="Title2" draggable="true" style="color:red;">some tiddler</button></p>
\ No newline at end of file