fix: fix clear button on live-selects by clearing option on focus

lib/arrow_web/components/core_components.ex

@@ -425,6 +425,7 @@ defmodule ArrowWeb.CoreComponents do
   attr :allow_clear, :boolean
   attr :target, :any, default: nil
   attr :update_min_len, :integer
+  attr :"phx-focus", :string
 
   def live_select(%{field: %Phoenix.HTML.FormField{} = field} = assigns) do
     assigns =

lib/arrow_web/components/shuttle_input.ex

@@ -37,6 +37,7 @@ defmodule ArrowWeb.ShuttleInput do
         options={@options}
         placeholder="Search for a route…"
         update_min_len={0}
+        phx-focus="clear"
       />
     </div>
     """
@@ -55,6 +56,12 @@ defmodule ArrowWeb.ShuttleInput do
     {:noreply, socket}
   end
 
+  def handle_event("clear", %{"id" => id}, socket) do
+    send_update(LiveSelect.Component, options: [], id: id)
+
+    {:noreply, socket}
+  end
+
   @spec option_for_shuttle(Shuttle.t()) :: {String.t(), integer()}
   defp option_for_shuttle(%Shuttle{id: id, shuttle_name: shuttle_name}) do
     {shuttle_name, id}

lib/arrow_web/components/stop_input.ex

@@ -40,6 +40,7 @@ defmodule ArrowWeb.StopInput do
         target={@myself}
         options={@options}
         value_mapper={&stop_value_mapper(&1, assigns.field)}
+        phx-focus="clear"
       />
     </div>
     """
@@ -77,6 +78,12 @@ defmodule ArrowWeb.StopInput do
     {:noreply, socket}
   end
 
+  def handle_event("clear", %{"id" => id}, socket) do
+    send_update(LiveSelect.Component, options: [], id: id)
+
+    {:noreply, socket}
+  end
+
   @spec option_for_stop(Stop.t() | GtfsStop.t()) :: {String.t(), String.t()}
   defp option_for_stop(%Stop{stop_id: stop_id, stop_desc: stop_desc, stop_name: stop_name}),
     do: {"#{stop_id} - #{if(stop_desc != "", do: stop_desc, else: stop_name)}", stop_id}

lib/arrow_web/live/shuttle_live/shuttle_live.ex

@@ -98,6 +98,7 @@ defmodule ArrowWeb.ShuttleViewLive do
                   options={shape_options_mapper(@shapes)}
                   value_mapper={&shape_value_mapper/1}
                   allow_clear={true}
+                  phx-focus="live_select_clear"
                 />
               </div>
             </div>
@@ -370,6 +371,12 @@ defmodule ArrowWeb.ShuttleViewLive do
     {:noreply, socket}
   end
 
+  def handle_event("live_select_clear", %{"id" => id}, socket) do
+    send_update(LiveSelect.Component, options: [], id: id)
+
+    {:noreply, socket}
+  end
+
   def handle_event("add_stop", %{"value" => direction_id}, socket) do
     direction_id = String.to_existing_atom(direction_id)