Change text inputs to apply change on blur (#1243)

lib/livebook_web/live/output/input_component.ex

@@ -150,11 +150,20 @@ defmodule LivebookWeb.Output.InputComponent do
 
   @impl true
   def handle_event("change", %{"value" => html_value}, socket) do
-    {:noreply, handle_html_value(socket, html_value)}
+    socket = handle_html_value(socket, html_value)
+
+    socket =
+      if report_immediately?(socket.assigns.attrs.type) do
+        maybe_report_change(socket)
+      else
+        socket
+      end
+
+    {:noreply, socket}
   end
 
   def handle_event("blur", %{"value" => html_value}, socket) do
-    socket = handle_html_value(socket, html_value)
+    socket = socket |> handle_html_value(html_value) |> maybe_report_change()
 
     if socket.assigns.error do
       {:noreply, assign(socket, value: socket.assigns.initial_value, error: nil)}
@@ -164,28 +173,14 @@ defmodule LivebookWeb.Output.InputComponent do
   end
 
   def handle_event("submit", %{"value" => html_value}, socket) do
-    socket = handle_html_value(socket, html_value)
+    socket = socket |> handle_html_value(html_value) |> maybe_report_change()
     send(self(), {:queue_bound_cells_evaluation, socket.assigns.attrs.id})
     {:noreply, socket}
   end
 
   defp handle_html_value(socket, html_value) do
-    current_value = socket.assigns.value
-
     case parse(html_value, socket.assigns.attrs) do
-      {:ok, ^current_value} ->
-        socket
-
       {:ok, value} ->
-        send(
-          self(),
-          {:set_input_values, [{socket.assigns.attrs.id, value}], socket.assigns.local}
-        )
-
-        unless socket.assigns.local do
-          report_event(socket, value)
-        end
-
         assign(socket, value: value, error: nil)
 
       {:error, error, value} ->
@@ -193,6 +188,21 @@ defmodule LivebookWeb.Output.InputComponent do
     end
   end
 
+  defp report_immediately?(type), do: type in [:select, :checkbox]
+
+  defp maybe_report_change(socket) when socket.assigns.error != nil, do: socket
+  defp maybe_report_change(%{assigns: %{value: value, initial_value: value}} = socket), do: socket
+
+  defp maybe_report_change(%{assigns: assigns} = socket) do
+    send(self(), {:set_input_values, [{assigns.attrs.id, assigns.value}], assigns.local})
+
+    unless assigns.local do
+      report_event(socket, assigns.value)
+    end
+
+    socket
+  end
+
   defp parse(html_value, %{type: :text}) do
     {:ok, html_value}
   end

test/livebook_web/live/session_live_test.exs

@@ -245,8 +245,8 @@ defmodule LivebookWeb.SessionLiveTest do
       {:ok, view, _} = live(conn, "/sessions/#{session.id}")
 
       view
-      |> element(~s/[data-el-outputs-container] form/)
-      |> render_change(%{"value" => "10"})
+      |> element(~s/[data-el-outputs-container] input/)
+      |> render_blur(%{"value" => "10"})
 
       assert %{input_values: %{"input1" => 10}} = Session.get_data(session.pid)
 
@@ -274,8 +274,8 @@ defmodule LivebookWeb.SessionLiveTest do
       {:ok, view, _} = live(conn, "/sessions/#{session.id}")
 
       view
-      |> element(~s/[data-el-outputs-container] form/)
-      |> render_change(%{"value" => "line\r\nline"})
+      |> element(~s/[data-el-outputs-container] textarea/)
+      |> render_blur(%{"value" => "line\r\nline"})
 
       assert %{input_values: %{"input1" => "line\nline"}} = Session.get_data(session.pid)
     end
@@ -312,8 +312,8 @@ defmodule LivebookWeb.SessionLiveTest do
       {:ok, view, _} = live(conn, "/sessions/#{session.id}")
 
       view
-      |> element(~s/[data-el-outputs-container] form/)
-      |> render_change(%{"value" => "sherlock"})
+      |> element(~s/[data-el-outputs-container] input/)
+      |> render_blur(%{"value" => "sherlock"})
 
       # The new value is on the page
       assert render(view) =~ "sherlock"