Prevent event bubbling on file upload targets (#3003)

In cases where an event is dispatched to  `live_file_input` the event
keeps triggering until a call stack error is raised:

  Uncaught RangeError: Maximum call stack size exceeded.

This can be triggered with something like:

    <div phx-click={Phoenix.LiveView.JS.dispatch("click", to: "##{@uploads.image.ref}")}>
    Upload
    </div>
    <form style="display: none;" id="upload-form" phx-submit="save" phx-change="validate">
      <.live_file_input upload={@uploads.image} />
      <button type="submit">Upload</button>
    </form>

To fix this, we set bubble to false if the event target is a file input.

assets/js/phoenix_live_view/dom.js

@@ -338,7 +338,12 @@ let DOM = {
   },
 
   dispatchEvent(target, name, opts = {}){
-    let bubbles = opts.bubbles === undefined ? true : !!opts.bubbles
+    let defaultBubble = true
+    let isUploadTarget = target.nodeName === "INPUT" && target.type === "file"
+    if (isUploadTarget) {
+      defaultBubble = false
+    }
+    let bubbles = opts.bubbles === undefined ? defaultBubble : !!opts.bubbles
     let eventOpts = {bubbles: bubbles, cancelable: true, detail: opts.detail || {}}
     let event = name === "click" ? new MouseEvent("click", eventOpts) : new CustomEvent(name, eventOpts)
     target.dispatchEvent(event)