Click Propagation / Event Bubbling

Bugs Closed
1

I have been caught out a number of times, where I have had a click event on an element that sits within a group, and both the group and the element have different click events, however when you click the element, that action occurs, the group below it also fires as the event bubbles up the DOM tree.

Can you implement a workflow action to suppress the click propagation through to the group to stop the event bubbling.
It could be implemented via the workflow action, or as a checkbox option on elements, or both.

jquery has this implemented for this very reasons.

Thanks…it would save a lot of hassle from having to restructure interfaces to prevent it.

2

Hello,

We’re already preventing bubbling. Can you provide an example if you see something different?

3

An icon on a group causes bubbling.

I had the group click to navigate to the page to view the item in detail, the icon click toggled the state of a field value on the item.

1 Like
4

My tests don’t show that so without a situation to reproduce we can’t help.

5

I’ll see if I can replicate it in a demo. It was definitely doing it in repeating groups, which contained a group, with an icon on the group.

6

I have built a demo page and to begin with I couldn’t get it to replicate. So had to rethink what I was doing.

Eventually remembered, it was overlayed icons on a group.

See the demo page below, If you use the ± icons to add and remove selected items from a list, you will see it also triggers the underlying group click. It does not do it for the flag icon, the only difference is the ± have conditional visibility/have been added to the group.

https://dave-auld-demo-stuff.bubbleapps.io/version-test/eventbubbling?debug_mode=true

(I also changed the category of this from Idea to Bug, seeing as you already have implemented the idea)

7

We’ll push a fix shortly.

8

That’s brilliant!
:grinning: