[RESOLVED] Click.delegate attached to outer node preventing <md-switch/> from working

Help Requests
1

I have a view which composes child views as shown below:

<div class="card hoverable navigation-card" click.delegate="navigateToDetails($event)">
			<div class="card-header center-align">
				<span class="card-title activator grey-text text-center">${structure.name}</span>
				<span show.bind="indicatorVisibility" class="large-circle ${structure.statusColor} right">&nbsp;</span>
			</div>
			<div class="card-content">
				<null-device if.bind="structureDoesNotHaveDevices"></null-device>
				<compose else repeat.for="device of structure.devices" view-model="./types/${device.type.name | viewModelFromPascalCase}" model.bind="device"></compose>
			</div>
		</div>

In general I want to navigate to a detailed view via the click.delegate but I have a couple of composed views similar to this:

<div class="card-stacked">
			<div class="card-content valign center-block">
				<h6>Valve</h6>
				<md-switch label-on="Open" label-off="Closed" checked.bind="checked" disabled.bind="disabled"></md-switch>
				<div class="timestamp grey-text">
					${device.data.timestamp | dateFormat}
				</div>
			</div>
		</div>

The rendered view looks like this:

image
image.png833×245 6.65 KB

The click.delegate is preventing the md-switch element from operating correctly. I’ve tried to stop the propagation of the event like so:

navigateToDetails(event) {
		if (event.path.indexOf("md-switch")) {
			event.stopPropagation();
			return;
		}
		
		if (this.structure.devices.length) {
			const metadata = this.structure.devices[0].metadata;
				this.router.navigateToRoute("structure-detail",
					{
						locationId: metadata.locationId,
						zoneId: metadata.zoneId,
						structureId: metadata.structureId,
					});
		}
	}

This stops all navigation to my details view and sadly does not allow the switch to work either. How can I support both?

1 Like
2

A reproduction gist would help. Try attaching event handlers on div, md-switch, and input to understand what happens with the event.

1 Like
3

@MaximBalaganskiy I was able to resolve my issue by placing a click.delgate on my md-switch tag:

<md-switch click.delegate="toggleChecked()" label-on="Open" label-off="Closed" checked.bind="checked" disabled.bind="disabled"></md-switch>

and changing the navigatToDetails method like so:

navigateToDetails(event) {
		const tags = ["BUTTON", "MD-SWITCH"];
		const node = event.path.find(p => tags.indexOf(p.tagName) > -1);

		if (node) {
			return false;
		}
				
		if (this.structure.devices.length) {
			const metadata = this.structure.devices[0].metadata;
				this.router.navigateToRoute("structure-detail",
					{
						locationId: metadata.locationId,
						zoneId: metadata.zoneId,
						structureId: metadata.structureId,
					});
		}
	}

While I was debugging I had similar issue with other tags like button which led me to the final solution but your reply pointed me in the right direction.

Many thanks!

1 Like