🐛 Fix wrong current element being used when attaching reactive listeners

lib/core/renderer.js

@@ -2457,17 +2457,20 @@ Renderer.setMethod(function applyElementOptions(element, options, for_sync_rende
 		if (needs_async_work && !for_sync_render) {
 
 			let renderer = this,
-				value = val,
-				value_key = key;
+			    value = val,
+			    value_key = key;
 
 			Hawkejs.getRenderTasks(element).addPreTask(function prepareValue() {
 
-				var that = this,
-					final_tasks = [],
-					pre_tasks = [],
-					tasks = [];
+				let that = this,
+				    final_tasks = [],
+				    pre_tasks = [],
+				    tasks = [];
 
-				Hawkejs.recurseLineTasks([value], pre_tasks, tasks, renderer);
+				let sub_renderer = renderer.createSubRenderer();
+				sub_renderer[Hawkejs.ANCESTOR_ELEMENT] = element;
+
+				Hawkejs.recurseLineTasks([value], pre_tasks, tasks, sub_renderer);
 
 				final_tasks = final_tasks.concat(pre_tasks).concat(tasks);
 

lib/element/custom_element.js

@@ -1226,6 +1226,10 @@ function renderContentsWithTemplate(element, template, variables, slot_data, ple
 	if (element.constructor.use_new_renderer_scope || renderer?.dialog_open) {
 		renderer = renderer.createSubRenderer();
 		renderer.scope_id = renderer.getId();
+	} else {
+		// Create a shim so the `ANCESTOR_ELEMENT` symbol
+		// doesn't break things later
+		renderer = Object.create(renderer);
 	}
 
 	if (!pledge) {

test/10-expressions.js

@@ -1334,8 +1334,56 @@ This should be a converted variable:
 					<my-text id="one"><i title="change1"></i></my-text>
 					<my-text id="two"><i title="change2"></i></my-text>
 				`,
-
 			],
+			// Test to see if the listeners are attached to the correct optional
+			[
+				// Prepare the state & variables
+				(vars) => {
+					state = {};
+					state.my_name = vars.set('my_name', Optional('init'));
+					state.some_text = vars.set('some_text', Optional('init'));
+				},
+				// Template
+				`
+					<div>
+						<state-value-test
+							id="one"
+							state:title={% my_name{:} %}
+						></state-value-test>
+						<state-value-test
+							id="two"
+							state:title={% some_text{:} %}
+						></state-value-test>
+					</div>
+				`,
+				// Expected result
+				`
+					<div>
+						<state-value-test id="one"><i id="ione" result="init"></i></state-value-test>
+						<state-value-test id="two"><i id="itwo" result="init"></i></state-value-test>
+					</div>
+				`,
+				() => {
+					// Change the second variable (some_text) first
+					state.some_text.value = '1stchange';
+				},
+				`
+					<div>
+						<state-value-test id="one"><i id="ione" result="init"></i></state-value-test>
+						<state-value-test id="two"><i id="itwo" result="1stchange"></i></state-value-test>
+					</div>
+				`,
+				() => {
+					// Change only the first variable (my_name) first
+					state.my_name.value = '2ndchange';
+				},
+				`
+					<div>
+						<state-value-test id="one"><i id="ione" result="2ndchange"></i></state-value-test>
+						<state-value-test id="two"><i id="itwo" result="1stchange"></i></state-value-test>
+					</div>
+				`,
+			]
 		];
 
 		createReactiveTests(tests);

test/helpers/_load.js

@@ -19,4 +19,5 @@ module.exports = function loadHawkejs(hawkejs) {
 	hawkejs.load(test_base + '/helpers/print_attribute.js');
 	hawkejs.load(test_base + '/helpers/with_prepared_variables.js');
 	hawkejs.load(test_base + '/helpers/print_variables_element.js');
+	hawkejs.load(test_base + '/helpers/state_value_test.js');
 }

test/helpers/state_value_test.js

@@ -0,0 +1,11 @@
+/**
+ * state-value-test element
+ */
+const StateValueTest = Blast.Bound.Function.inherits('Hawkejs.Element', 'StateValueTest');
+
+StateValueTest.setTemplateFile('elements/state_value_test');
+
+StateValueTest.defineStateVariable('defbool', {
+	type      : 'boolean',
+	default   : false,
+});

test/templates/elements/state_value_test.hwk

@@ -0,0 +1 @@
+<i id={% "i" + self.id  %} result={% state:title{:} %}></i>