phx-click event bubbles down to child inputs

[wittjosiah]

Environment

• Elixir version (elixir -v): Elixir 1.8.1 (compiled with Erlang/OTP 20)
• Phoenix version (mix deps): phoenix 1.4.11 (Hex package) (mix)
• Phoenix LiveView version (mix deps): phoenix_live_view 0.4.1 (Hex package) (mix)
• NodeJS version (node -v): v11.14.0
• NPM version (npm -v): 6.7.0
• Operating system: macOS 10.14.6

Actual behavior

Example repo: https://github.com/wittjosiah/phx-click-bubbling

phx-click events seem to bubble down in unexpected ways. In the following example clicking into the input triggers the event on the div.

<div style="height: 100%; width: 100%; background-color: <%= @color %>;" phx-click="color">
  <input type="text" />
</div>

In order to prevent this an empty phx-click attribute needs to be added to the input

<div style="height: 100%; width: 100%; background-color: <%= @color %>;" phx-click="color">
  <input type="text" phx-click />
</div>

Expected behavior

Not completely sure if this is a bug or not, but in my mind the expected behavior would be for the click event not to bubble down the child input.

[chrismccord]

The event bubbling in this case is expected as it works the same way that the event would bubble in the addEventListener scenario. You can bind an event yourself with a js hook and call e.preventDeafault() if you need to override. Thanks!

[snewcomer]

Just to plant any seeds for future ideas - A phx-click-capture would help alleviate this scenario.

https://javascript.info/bubbling-and-capturing#capturing