I have a livebook cell that starts with a single input, then appends additional select inputs recursively based on the input of the previous select box. It’s a self-referencing table, so it’s using parent / child relations to populate the next box. I’m pretty surprised that this works as I thought the recursive Kino.listen/2 calls would break something, but pleasingly it works pretty well.

The obvious problem is that inputs are only appended, not removed. If an earlier selection in the list is changed, another box is simply appended on the end. I can’t find any obvious way to track inputs appended to a frame so I can remove them without clearing the whole form - is there any way to track these? I have also tried using a Kino form or just adding raw inputs but neither seems to allow an append like the frame does.

defmodule AreaInputs do
  import Ecto.Query

  defp parent_id_filter(queryable, parent_id) do
    case parent_id do
      nil -> queryable |> where([a], is_nil(a.parent_id))
      _ -> queryable |> where([a], a.parent_id == ^parent_id)
    end
  end

  def get_areas(parent_id) do
    Area
    |> parent_id_filter(parent_id)
    |> order_by([a], a.name)
    |> AreaRepo.all()
    |> Enum.map(fn area -> {area.id, area.name} end)
  end

  def append_select_and_listen(frame, event) do
    new_input = Kino.Input.select("", AreaInputs.get_areas(event.value))
    Kino.Frame.append(frame, new_input)

    Kino.listen(new_input, fn event_2 ->
      append_select_and_listen(frame, event_2)
    end)
  end
end

frame = Kino.Frame.new() |> Kino.render()
initial_input = Kino.Input.select("", AreaInputs.get_areas(nil))
Kino.Frame.render(frame, initial_input)

Kino.listen(initial_input, fn event ->
  AreaInputs.append_select_and_listen(frame, event)
end)