live_file_input becomes a standard input when a phx-change event fires, losing almost all of its attributes.

wkirschbaum commented 2 weeks ago

Environment

Elixir version (elixir -v): 1.17.1
Phoenix version (mix deps): 1.17.14
Phoenix LiveView version (mix deps): 1.0.0-rc.1
Operating system: ubuntu 22lts
Browsers you attempted to reproduce this bug on (the more the merrier): firefox
Does the problem persist after removing "assets/node_modules" and trying again? Yes/no: yes

After upgrading: from phoenix 1.17.12 to 1.17.14 and phoenix_live_view 0.20.14 to 1.0.0-rc.1 our file uploads stopped functioning when within a form. We are still debugging, but logging an issue so long.

Actual behavior

On initial load the file input functions normally

<!-- <Phoenix.Component.live_file_input> lib/phoenix_component.ex:2987 (phoenix_live_view) -->
<input data-phx-id="m44-phx-F9pnaV-_EC1WGfAB" id="phx-F9pnaXw_lQAk6nVC" type="file" name="file" accept=".xlsx" data-phx-hook="Phoenix.LiveFileUpload" data-phx-update="ignore" data-phx-upload-ref="phx-F9pnaXw_lQAk6nVC" data-phx-active-refs="" data-phx-done-refs="" data-phx-preflighted-refs="" data-phx-auto-upload="" class="w-full max-w-xs">
<!-- </Phoenix.Component.live_file_input> -->

but when in a form it reverts to a standard input after a phx-change event fires.

<!-- <Phoenix.Component.live_file_input> lib/phoenix_component.ex:2987 (phoenix_live_view) -->
<input data-phx-id="m44-phx-F9pnaV-_EC1WGfAB" id="phx-F9pnaXw_lQAk6nVC" data-phx-skip="">
<!-- </Phoenix.Component.live_file_input> -->

Expected behavior

I would expect the input to keep the type attribute and keep functioning as a file input.

wkirschbaum commented 2 weeks ago

Its almost certainly something we do on the form/page, but currently trying to build a minimal reproducible form.

wkirschbaum commented 2 weeks ago

minimum code to reproduce ( it only seems to happen with all the parts included, both phx-click event and phx-change ).

<.form id="test-form" for={@upload_form} phx-change="do-something">
      <div>
        <%= PhoenixHTMLHelpers.Form.radio_button(
          @upload_form,
          :upload_file_type,
          "option 1",
          "phx-click": "update-upload-type"
        ) %>

        <%= PhoenixHTMLHelpers.Form.radio_button(
          @upload_form,
          :upload_file_type,
          "option 2",
          "phx-click": "update-upload-type"
        ) %>
      </div>

      <div class="container" phx-drop-target={@uploads.file.ref}>
        <!-- ... -->
        <.live_file_input upload={@uploads.file} />
      </div>

      <.button :if={@upload_type == "option 1"}>
        Submit
      </.button>
    </.form>

  def handle_event("do-something", params, socket) do
    {:noreply, socket}
  end

  def handle_event("update-upload-type", %{"value" => val}, socket) do
    {:noreply, socket |> assign(:upload_type, val)}
  end

This is from messy code, but still a regression perhaps?

wkirschbaum commented 2 weeks ago

We removed the customer phx-click events and it works again. Please close if those aren't mean to be used together.

SteffenDE commented 2 weeks ago

phoenixframework / phoenix_live_view