Use different html name for output inputs (#1970)

lib/livebook_web/live/output/audio_input_component.ex

@@ -45,7 +45,7 @@ defmodule LivebookWeb.Output.AudioInputComponent do
       data-sampling-rate={@sampling_rate}
       data-endianness={@endianness}
     >
-      <input type="file" data-input class="hidden" name="value" accept="audio/*" capture="user" />
+      <input type="file" data-input class="hidden" name="html_value" accept="audio/*" capture="user" />
       <audio controls data-preview></audio>
       <div class="flex items-center justify-center gap-4">
         <button

lib/livebook_web/live/output/image_input_component.ex

@@ -42,7 +42,7 @@ defmodule LivebookWeb.Output.ImageInputComponent do
       data-format={@format}
       data-fit={@fit}
     >
-      <input type="file" data-input class="hidden" name="value" accept="image/*" capture="user" />
+      <input type="file" data-input class="hidden" name="html_value" accept="image/*" capture="user" />
       <div class="flex justify-center" data-preview>
         <div class="flex justify-center text-gray-500">
           Drag an image file

lib/livebook_web/live/output/input_component.ex

@@ -95,7 +95,7 @@ defmodule LivebookWeb.Output.InputComponent do
 
   defp input_output(%{attrs: %{type: :select}} = assigns) do
     ~H"""
-    <select data-el-input class="input w-60" name="value">
+    <select data-el-input class="input w-60" name="html_value">
       <option
         :for={{{key, label}, idx} <- Enum.with_index(@attrs.options)}
         value={idx}
@@ -110,7 +110,7 @@ defmodule LivebookWeb.Output.InputComponent do
   defp input_output(%{attrs: %{type: :checkbox}} = assigns) do
     ~H"""
     <div class="mt-1">
-      <.switch_field data-el-input name="value" value={@value} />
+      <.switch_field data-el-input name="html_value" value={@value} />
     </div>
     """
   end
@@ -123,7 +123,7 @@ defmodule LivebookWeb.Output.InputComponent do
         type="range"
         data-el-input
         class="input-range"
-        name="value"
+        name="html_value"
         value={@value}
         phx-debounce="blur"
         phx-target={@myself}
@@ -144,7 +144,7 @@ defmodule LivebookWeb.Output.InputComponent do
       id={@id}
       data-el-input
       class={["input min-h-[38px] max-h-[300px] tiny-scrollbar", @attrs[:monospace] && "font-mono"]}
-      name="value"
+      name="html_value"
       phx-hook="TextareaAutosize"
       phx-debounce="blur"
       phx-target={@myself}
@@ -160,7 +160,7 @@ defmodule LivebookWeb.Output.InputComponent do
         type="password"
         data-el-input
         class="input w-auto bg-gray-50"
-        name="value"
+        name="html_value"
         value={@value}
         phx-debounce="blur"
         phx-target={@myself}
@@ -178,7 +178,7 @@ defmodule LivebookWeb.Output.InputComponent do
       type={html_input_type(@attrs.type)}
       data-el-input
       class="input w-auto invalid:input--error"
-      name="value"
+      name="html_value"
       value={to_string(@value)}
       phx-debounce="blur"
       phx-target={@myself}
@@ -202,7 +202,7 @@ defmodule LivebookWeb.Output.InputComponent do
   defp html_input_type(:text), do: "text"
 
   @impl true
-  def handle_event("change", %{"value" => html_value}, socket) do
+  def handle_event("change", %{"html_value" => html_value}, socket) do
     case parse(html_value, socket.assigns.attrs) do
       {:ok, value} ->
         {:noreply, handle_change(socket, value)}
@@ -213,7 +213,7 @@ defmodule LivebookWeb.Output.InputComponent do
     end
   end
 
-  def handle_event("submit", %{"value" => html_value}, socket) do
+  def handle_event("submit", %{"html_value" => html_value}, socket) do
     case parse(html_value, socket.assigns.attrs) do
       {:ok, value} ->
         socket = handle_change(socket, value)

test/livebook_web/live/session_live_test.exs

@@ -299,7 +299,7 @@ defmodule LivebookWeb.SessionLiveTest do
 
       view
       |> element(~s/[data-el-outputs-container] form/)
-      |> render_change(%{"value" => "10"})
+      |> render_change(%{"html_value" => "10"})
 
       assert %{input_values: %{"input1" => 10}} = Session.get_data(session.pid)
 
@@ -328,7 +328,7 @@ defmodule LivebookWeb.SessionLiveTest do
 
       view
       |> element(~s/[data-el-outputs-container] form/)
-      |> render_change(%{"value" => "line\r\nline"})
+      |> render_change(%{"html_value" => "line\r\nline"})
 
       assert %{input_values: %{"input1" => "line\nline"}} = Session.get_data(session.pid)
     end
@@ -366,7 +366,7 @@ defmodule LivebookWeb.SessionLiveTest do
 
       view
       |> element(~s/[data-el-outputs-container] form/)
-      |> render_change(%{"value" => "sherlock"})
+      |> render_change(%{"html_value" => "sherlock"})
 
       # The new value is on the page
       assert render(view) =~ "sherlock"