# Autonomous click event being blocked (I can't find the reason)

**URL:** <https://discourse.nodered.org/t/autonomous-click-event-being-blocked-i-cant-find-the-reason/98867>\
**Category:** Developing Nodes\
**Created:** [28 August 2025 16:26 UTC](https://discourse.nodered.org/t/autonomous-click-event-being-blocked-i-cant-find-the-reason/98867 "2025-08-28T16:26:51Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![marcus-j-davies](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/marcus-j-davies/32/103435_2.png) [@marcus-j-davies](https://discourse.nodered.org/u/marcus-j-davies)\
**Post date:** [28 August 2025 16:26 UTC](https://discourse.nodered.org/t/autonomous-click-event-being-blocked-i-cant-find-the-reason/98867/1 "2025-08-28T16:26:51Z")

</div>

![Screenshot 2025-08-28 at 17.19.45](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/9/8916e2d4ed455b38f9b2ddc59b2bf90ee0aa9098.png)

I'll explain.

When I click on A (Zwave) Node in my sidebar, it loads in all its endpoints (from an Ajax get), and what I do - is auto click the first one, after they are loaded.

What is strange, is that the click is being handled with no issue

 ![Screenshot 2025-08-28 at 17.22.28](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/c/ccb326db2c34cf7103db26eceb4da85046d32f7e.png)

Here is the code that loads in all Endpoints, and activates the first one.

```js
Runtime.Post('DRIVER', 'getValueDB', [selectedNode.nodeId])
    .then((data) => {
        if (data.callSuccess) {
            data = data.response[0];

            const groupByEP = function(xs) {
                return xs.reduce(function(rv, x) {
                    (rv[x.valueId.endpoint] = rv[x.valueId.endpoint] || []).push(x);
                    return rv;
                }, {});
            };

            const EPGroups = groupByEP(data.values);
            const EPIDs = Object.keys(EPGroups);

            EPIDs.forEach((E) => {
                const EP = E === '0' ? 'Root' : `EP${E}`;
                const Button = $(`<div data-endpoint="${E}">${EP}</div>`);
                Button.click(() => {
                    listCCs(EPGroups[E]);
                    $('#zwjs-endpoint-list > div').removeAttr('selected');
                    $(`#zwjs-endpoint-list > div[data-endpoint="${E}"]`).attr('selected', 'selected');
                });
                $('#zwjs-endpoint-list').append(Button);
            });

            /* >>>> HERE <<<< */
            $('#zwjs-endpoint-list > div[data-endpoint="0"]').trigger('click');
        } else {
            alert(data.response);
        }
    })
    .catch((Error) => {
        alert(Error.message);
    });

```

Looking at the browser log, and digging into the stack trace, its this line.

```auto
$('#zwjs-endpoint-list > div[data-endpoint="0"]').trigger('click');

```

Now, this does trigger another routine (and it runs fine) - and it does not do anything with media (not even any Ajax calls).

Im struggling to understand why my browser (Yes @TotallyInformation - Safari 😉 ) complains - but before I blame Apple - am I missing something? - as nothing bad is happening.

I do note - the stack is listing the Node RED editor (vendor) a lot - is that itself doing any media things that I am not aware ?

For completeness, here is listCCs  
(`Open` is triggered by interaction, and results in a delayed click elsewhere, and is not called upon - form the Endpoint click)

```js
// EP Selected
	const listCCs = (Collection) => {
		const groupByCC = function (xs) {
			return xs.reduce(function (rv, x) {
				(rv[x.valueId.commandClass] = rv[x.valueId.commandClass] || []).push(x);
				return rv;
			}, {});
		};

		const CCGroups = groupByCC(Collection);
		const CCGroupIDs = Object.keys(CCGroups);

		const Items = [];

		CCGroupIDs.forEach((CCID) => {
			const Name = CCGroups[CCID][0].valueId.commandClassName;
			const Item = {
				element: `<div><span class="zwjs-cc-id">0x${parseInt(CCID).toString(16).padStart(2, '0').toUpperCase()}</span> - ${Name}</div>`,
				children: [],
				parent: true
			};

			CCGroups[CCID].forEach((V) => {
				const getCurrentValue = (value) => {
					let Display;
					if (value !== undefined) {
						if (typeof value === 'object' && !Array.isArray(value)) {
							Display = '(Complex)';
						} else {
							Display = `${value} ${V.metadata.unit || ''}`;
						}
						return `<span class="zwjs-cc-value" id="zwjs-value-${getValueUpdateHash(V.valueId)}" style="padding:1px;float:right;color:rgb(46, 145, 205); min-width:80px">${Display}</span>`;
					} else {
						return '';
					}
				};

				SelectedNodeVIDs[getValueUpdateHash(V.valueId)] = {
					metadata: V.metadata,
					valueId: V.valueId,
					currentValue: V.currentValue
				};

				const sItem = {
					element: `<div style="width:100%; margin-right:30px">${V.metadata.label} ${getCurrentValue(V.currentValue)}</div>`,
					icon: V.metadata.writeable ? 'fa fa-pencil' : '',
					parent: false,
					valueInfo: SelectedNodeVIDs[getValueUpdateHash(V.valueId)]
				};

				Item.children.push(sItem);
			});

			Items.push(Item);
		});

		$('#zwjs-cc-list').treeList('empty');
		$('#zwjs-cc-list').treeList('data', Items);
		$('#zwjs-cc-list').on('treelistselect', function (event, item) {
			if (Object.keys(item).length < 1 || item.parent === true) {
				return;
			}
			CloseTray();
			const Options = {
				width: 700,
				title: 'Value Management',
				buttons: [
					{
						id: 'zwjs-tray-about',
						text: 'About Zwave JS',
						click: function () {
							CloseTray();
						}
					},
					{
						id: 'zwjs-tray-close',
						text: 'Close',
						click: function () {
							CloseTray();
						}
					}
				],
				open: function (tray) {
					const trayBody = tray.find('.red-ui-tray-body, .editor-tray-body');

					let Property;
					if (typeof item.valueInfo.valueId.property === 'number') {
						Property = `0x${parseInt(item.valueInfo.valueId.property).toString(16).padStart(2, '0').toUpperCase()}`;
					} else {
						Property = item.valueInfo.valueId.property;
					}

					if (item.valueInfo.valueId.propertyKey) {
						if (typeof item.valueInfo.valueId.propertyKey === 'number') {
							Property += ` / 0x${parseInt(item.valueInfo.valueId.propertyKey).toString(16).padStart(2, '0').toUpperCase()}`;
						} else {
							Property += ` / ${item.valueInfo.valueId.propertyKey}`;
						}
					}

					const State = {
						ccId: `0x${parseInt(item.valueInfo.valueId.commandClass).toString(16).padStart(2, '0').toUpperCase()}`,
						ccName: item.valueInfo.valueId.commandClassName,
						valueLabel: item.valueInfo.metadata.label,
						nodeId: selectedNode.nodeId,
						property: Property,
						editInfo: {
							valueLabel: item.valueInfo.metadata.label,
							valueId: item.valueInfo.valueId,
							writeable: item.valueInfo.metadata.writeable,
							currentValue: item.valueInfo.currentValue,
							type: item.valueInfo.metadata.type,
							states: item.valueInfo.metadata.states,
							allowManualEntry:
								item.valueInfo.metadata.allowManualEntry !== undefined
									? item.valueInfo.metadata.allowManualEntry
									: item.valueInfo.metadata.writeable
						}
					};

					State.examples = {
						valueLabel: item.valueInfo.metadata.label,
						nocmd: {
							payload: {
								cmd: {
									api: 'VALUE'
								},
								cmdProperties: {
									nodeId: selectedNode.nodeId,
									valueId: { ...item.valueInfo.valueId }
								}
							}
						},
						cmd: {
							topic: selectedNode.nodeId,
							valueId: { ...item.valueInfo.valueId }
						}
					};

					delete State.examples.cmd.valueId.commandClassName;
					delete State.examples.cmd.valueId.propertyName;
					delete State.examples.cmd.valueId.propertyKeyName;
					delete State.examples.nocmd.payload.cmdProperties.valueId.commandClassName;
					delete State.examples.nocmd.payload.cmdProperties.valueId.propertyName;
					delete State.examples.nocmd.payload.cmdProperties.valueId.propertyKeyName;

					if (item.valueInfo.metadata.writeable) {
						State.examples.nocmd.payload.cmd.method = 'setValue | getValue';
						State.examples.nocmd.payload.cmdProperties.value = item.valueInfo.currentValue;
						State.examples.cmd.payload = item.valueInfo.currentValue;
					} else {
						State.examples.nocmd.payload.cmd.method = 'getValue';
					}

					trayBody.append(TPL_ValueManagement(State));

					setTimeout(() => {
						$('.zwjs-tray-menu > div[default]').trigger('click');
					}, 250);
				}
			};
			RED.tray.show(Options);
		});
	};

```

---

<div class="post-metadata">

**Author:** ![marcus-j-davies](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/marcus-j-davies/32/103435_2.png) [@marcus-j-davies](https://discourse.nodered.org/u/marcus-j-davies)\
**Post date:** [28 August 2025 17:21 UTC](https://discourse.nodered.org/t/autonomous-click-event-being-blocked-i-cant-find-the-reason/98867/2 "2025-08-28T17:21:42Z")

</div>

I still don't know why this was occurring, so decided to not do the click thing. -and the error is gone.  
Strange! as I thought unless its causing media, it should be allowed

plus its **not** happening anywhere else with auto clicks

```auto
EPIDs.forEach((E) => {
    const EP = E === '0' ? 'Root' : `EP${E}`;
    const Button = $(`<div data-endpoint="${E}">${EP}</div>`);
    Button.click(() => {
        listCCs(EPGroups[E]);
        $('#zwjs-endpoint-list > div').removeAttr('selected');
        $(`#zwjs-endpoint-list > div[data-endpoint="${E}"]`).attr('selected', 'selected');
    });
    $('#zwjs-endpoint-list').append(Button);
});

//$('#zwjs-endpoint-list > div[data-endpoint="0"]').trigger('click');
listCCs(EPGroups['0'])
$(`#zwjs-endpoint-list > div[data-endpoint="0"]`).attr('selected', 'selected');

```

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [28 August 2025 19:21 UTC](https://discourse.nodered.org/t/autonomous-click-event-being-blocked-i-cant-find-the-reason/98867/3 "2025-08-28T19:21:55Z")

</div>

Personally, I wouldn't try to fool the browser that way. You never really know when you will fall foul of browsers trapping such things due to security concerns.

I would make the click function a separate function, assign it to the button click but then call it manually to trigger correctly.

---

<div class="post-metadata">

**Author:** ![marcus-j-davies](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/marcus-j-davies/32/103435_2.png) [@marcus-j-davies](https://discourse.nodered.org/u/marcus-j-davies)\
**Post date:** [28 August 2025 19:24 UTC](https://discourse.nodered.org/t/autonomous-click-event-being-blocked-i-cant-find-the-reason/98867/4 "2025-08-28T19:24:53Z")

</div>

> [@TotallyInformation](#):
>
> then call it manually to trigger correctly.

Yup - thats what I ended up doing - luckily, the "trick-click" (trademark pending 😄) - is very rare in my code base, so quite easy to address

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [11 September 2025 19:25 UTC](https://discourse.nodered.org/t/autonomous-click-event-being-blocked-i-cant-find-the-reason/98867/5 "2025-09-11T19:25:12Z")

</div>

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.