Add Tag on task using Enter

lib/app_web/live/app_live.ex

@@ -98,13 +98,7 @@ defmodule AppWeb.AppLive do
     tag = Tag.get_tag!(value["tag_id"])
     tags = Tag.list_person_tags(person_id)
 
-    selected_tags =
-      if Enum.member?(selected_tags, tag) do
-        List.delete(selected_tags, tag)
-      else
-        [tag | selected_tags]
-      end
-      |> Enum.sort_by(& &1.text)
+    selected_tags = toggle_tag(selected_tags, tag)
 
     {:noreply, assign(socket, tags: tags, selected_tags: selected_tags)}
   end
@@ -122,6 +116,34 @@ defmodule AppWeb.AppLive do
     {:noreply, assign(socket, tags: tags)}
   end
 
+  @impl true
+  def handle_event(
+        "add-first-tag",
+        %{"key" => "Enter"},
+        socket
+      ) do
+    case socket.assigns.tags do
+      [] ->
+        {:noreply, socket}
+
+      _ ->
+        selected_tag =
+          socket.assigns.tags
+          |> List.first()
+          |> Map.get(:id)
+          |> Tag.get_tag!()
+
+        {:noreply,
+         assign(socket,
+           selected_tags: toggle_tag(socket.assigns.selected_tags, selected_tag)
+         )}
+    end
+  end
+
+  @impl true
+  def handle_event("add-first-tag", _params, socket),
+    do: {:noreply, socket}
+
   @impl true
   def handle_event("delete", %{"id" => item_id}, socket) do
     Item.delete_item(item_id)
@@ -384,6 +406,15 @@ defmodule AppWeb.AppLive do
     end
   end
 
+  defp toggle_tag(selected_tags, tag) do
+    if Enum.member?(selected_tags, tag) do
+      List.delete(selected_tags, tag)
+    else
+      [tag | selected_tags]
+    end
+    |> Enum.sort_by(& &1.text)
+  end
+
   def class_footer_link(filter_name, filter_selected) do
     if filter_name == filter_selected do
       "px-2 py-2 h-9 mr-1 bg-teal-700 text-white rounded-md"

lib/app_web/live/app_live.html.heex

@@ -56,8 +56,14 @@
         name="tag"
         class="w-full my-2"
         x-on:focus="open = true"
+        x-on:keydown.enter.prevent="
+          if (event.key === 'Enter') {
+            event.target.value = '';
+          }
+        "
         phx-keyup="filter-tags"
-        phx-debounce="250"
+        phx-keyup-debounce="250"
+        phx-keydown="add-first-tag"
         autocomplete="off"
         placeholder="tags"
       />

test/app_web/live/app_live_test.exs

@@ -806,4 +806,50 @@ defmodule AppWeb.AppLiveTest do
     {:ok, view, _html} = live(conn, "/")
     assert render_hook(view, "filter-tags", %{"key" => "t", "value" => "t"})
   end
+
+  test "select tag when enter pressed", %{conn: conn} do
+    {:ok, _tag1} =
+      Tag.create_tag(%{person_id: 0, text: "tag1", color: "#FCA5A5"})
+
+    {:ok, _tag2} =
+      Tag.create_tag(%{
+        person_id: 0,
+        text: "enter_tag_selected",
+        color: "#FCA5A5"
+      })
+
+    {:ok, view, _html} = live(conn, "/")
+
+    assert render_keydown(view, "add-first-tag", %{"key" => "Enter"}) =~
+             "enter_tag_selected"
+
+    assert render_submit(view, :create, %{text: "tag enter pressed"})
+
+    assert render(view) =~ "tag enter pressed"
+    assert render(view) =~ "enter_tag_selected"
+  end
+
+  test "dont select tag if there arent tags created", %{conn: conn} do
+    {:ok, view, _html} = live(conn, "/")
+
+    assert render_keydown(view, "add-first-tag", %{"key" => "Enter"})
+
+    assert render_submit(view, :create, %{text: "tag enter pressed"})
+
+    last_item_inserted = Item.list_person_items(0) |> List.last()
+
+    assert last_item_inserted.tags == []
+  end
+
+  test "dont select tag if other keydown is pressed", %{conn: conn} do
+    {:ok, view, _html} = live(conn, "/")
+
+    assert render_keydown(view, "add-first-tag", %{"key" => "Esc"})
+
+    assert render_submit(view, :create, %{text: "tag enter pressed"})
+
+    last_item_inserted = Item.list_person_items(0) |> List.last()
+
+    assert last_item_inserted.tags == []
+  end
 end