FYI - On Polymer's stopPropagation() method

Development
1

Hi,

just wanted to point something I found today.

I copied some custom UI code from the forum and made my own PTZ controls for a cheap wifi camera. I was having trouble with the button events firing the details popup (the small window that shows state history) for the script.

There are some topics pointing to the ev.stopPropagation function to handle this but it was not working for me. I then started looking around more generally for the same issue but outside Home Assistant and it turns out the solution to stop the events from triggering the details popup is this:

ev.detail.sourceEvent.stopPropagation();

Anyway just wanted to share. Hope it helps! Thanks,

2

Hi, able to share where to find that and stop the details popup?

3

Hi, not sure if I understand your question, but this code goes in the event handler script inside your custom component html code.

I found this looking for a similar issue with the Polymer framework which HA uses.

4

Hi,

Do you recall where you found this fix? It seems to work well for my PC browsers (click events) but not my iOS browsers (touch events). Trying to find more information as I can’t get stopPropagation() to work on iOS devices.

5

Hi,

I just googled Polymer stopPropagation, don’t really remember the exact post.

But I still have a similar issue, my buttons graphics don’t display properly in the iOS app. Each button have a svg graphic on it, like this:

    <paper-button on-tap="btntap3" in-dialog="[[inDialog]]">
  	  <svg style="width:24px;height:24px" viewBox="0 0 24 24">
  	    <path d="M8 0.5l-7.5 7.5h4.5v8h6v-8h4.5z"></path>
  	  </svg>
  	</paper-button>

But they just won’t show in iOS app or Safari for iOS. They just work on the macOS Safari. This is where I am at now. I will update if I can fix it.

Also, I just tried, the buttons don’t show in chrome for macOS either.

6

Thanks, I ended up figuring out my own problem with stopPropagation. For reasons I still don’t understand, every time I clicked a button I would get the history popup. I ended up adding an on-click event to the button group and everything started working.

  <paper-button-group on-click="stopPropagation">
    <paper-button class="on" on-tap='handleOnTap' hidden$='[[!onButtonVisible]]'>On</paper-button>
    <paper-button class="off" on-tap='handleOffTap' hidden$='[[!offButtonVisible]]'>Off</paper-button>
  </paper-button-group>

Where:

stopPropagation: function (ev) {
  ev.stopPropagation();
}

Oddly, this doesn’t fix it if I change it to on-tap, so I don’t know why on-click works but on-tap doesn’t…