Embedded View Navigation Prevention

I’ve built a mobile app and on the main screen, I have two embedded views which act as preview panes for their contents. What I’d like to have happen is the user taps the preview pane and navigates to the shown view. What happens though is the elements within the embedded view can be interacted with (so if an element with navigation built in is tapped, it takes you there instead). Is there a quick easy way to disable interactions with an embedded view’s elements? I’m sure I could set conditions on each individual element to prevent it from working if that isn’t the current view but that would be longwinded and tedious and I’m just curious if there’s a quicker option available out of the box.

Hi @agriner, post 8.0.15 you should be able to use the stop propagation option to do this.

1 Like

I don’t think stopping propagation will resolve this. Stopping propagation is intended to prevent the following scenario:

My View has the following setup.

L_ Flex Container (contains onClick Event)
   L_ Button (contains onClick Event)

If I click the Button, a counter increments by 1. If I click the Flex Container, the same counter increments by 2. Without stopping propagation, a click of the button will actually increment the counter by 3 because your click event IS within the bounds of the flex container. If I “enable” the “Stop Propagation” option for the button, then the counter only increments by 1.

Note that this did NOT prevent the button from performing its attached onClick event - it only stopped that event from propagating to the parent.

So in @agriner 's scenario, the navigation would still occur.

Unfortunately, I don’t believe there is a better option available at this time other than to verify the path of the primary view is the expected View through some hard-coded comparison:

if self.page.props.primaryView == 'ViewPath/MyPreviewView':
    # do navigation here

Yeah, just regarding the stop propagation option:
I think it works in the wrong direction. It prevents propagation going up the hierarchy so I could use it to prevent the navigation going TO the preview pane but any element interaction within that embedded view still occurs. If there was an inverse option, I’d be in good shape but I don’t know that there is.
It was worth a try but it sounds like I’ll need to hard code things after all.
Thanks to both of you for your help!


Yes you are both 100% right, it stops the events from bubbling up.

I was completely off my game yesterday :sweat_smile: I’ll try harder today :slight_smile:

1 Like