Improving LiveView UX with Phoenix Channels - Tagging part 3

This post was updated 01 May - 2020

forms phoenix liveview tagging channels

In the previous tutorial, I set up the tagging interface. It had, however, a small issue. If I added a tag, it didn't really refocus on the input, so I needed to manually set the mouse there again.

In this tutorial, I will show how I can broadcast a message using Phoenix Channels to be handled by channels javascript and then simply set focus using javascript.

This tutorial also builds upon this tutorial where I set up an AppChannel that uses a channel name that is concatenated like:


And to pass in the csrf_token into the session so I can use it in all LiveView components is covered in this tutorial.

STEP 1 - LiveView component changes

I basically need to do 3 changes here.

  1. In the mount function, extract csrftoken from session and add a channelname to assigns
  2. Add a refocus_input/1 function where I actually do the broadcast from
  3. Call refocus_input/1 when a tag is added

Start in the mount function. Note that the csrf_token comes from a plug that I set up in a previous tutorial.

def mount(%{"id" => product_id, "csrf_token" => csrf_token} = _session, socket) do
  product = get_product(product_id, connected?(socket))

  assigns = [
    channel_name: "app:#{csrf_token}",

  {:ok, assign(socket, assigns)}

Next step is to add the function where I do the actual broadcast from. Note that I specify the id of the input field. And the event name is "focus". So in theory, I could use the same JS for different focus events that should focus on different dom elements.

defp refocus_input(socket) do
    %{id: "tagging-form"}


Last part there is to add refocus_input(socket)

def handle_event("pick", %{"name" => search_phrase}, socket) do
  product = socket.assigns.product
  taggings = add_tagging_to_product(product, search_phrase)

STEP 2 - Frontend changes

I basically just need to do 2 things.

  1. Add an id to the input field
  2. Add a channel callback in JS

So open the template and add id="tagging-form" inside the input.

# lib/tutorial_web/templates/product/product_tagging.html.leex

<%= form_tag "#", [phx_change: :search, phx_submit: :submit] do %>
    class="inline-block text-sm focus:outline-none"
    value="<%= @search_phrase %>"
    placeholder="Add tag"
<% end %>

And open the socket.js and add

// assets/js/socket.js

channel.on("focus", msg => {
  const elm = document.getElementById(msg['id'])
  elm.value = ''

Final result

Related Tutorials

Published 13 Feb - 2020
Updated 01 May - 2020

Tagging interface with Phoenix LiveView and Tailwind - Tagging part 2

In the previous tutorial, I set up the the backend for being able to add tags to products. I have also written a tutorial about adding a LiveView an..

Published 05 Feb - 2020
Updated 01 May - 2020

Nested model forms with Phoenix LiveView

I my last article, I set up a relationship between products and variants. But what I didn't go through was to setup a form where you can manage the ..