In prototype mode, when a top layer has no defined interaction (e.g., no "on click" action), clicks on it are being ignored, allowing interactions from elements behind it to be triggered. This leads to unexpected behavior, especially in overlays, modals, or elements meant to block interaction.
Steps to Reproduce:
-
Create a frame with interactive elements (e.g., buttons with links).
-
Place a new layer on top of the frame (e.g., a rectangle with 100% opacity) that has no interaction defined.
-
Switch to prototype mode and preview.
-
Click on the top layer.
Expected Behavior:
The click should not trigger any interaction behind the top layer. The topmost layer should block the click event, regardless of whether it has an interaction defined or not.
Actual Behavior:
The click goes through the top layer and activates the interaction of elements beneath it.
Here is a link with a prototype that shows the problem, try clicking on the modal area that has no interaction:
Is there any way to fix this?
The only workaround I found was to add a “Close overlay” interaction to the modal container, but I believe this might not be a reliable solution for all scenarios.