tengo un input que al escribir palabras clave se renderea una lista con los datos de la base de datos para seleccionarlos y el que seleccione se pase al input (como si fuera un autocompletado) pero quiero que sigua con el focus activo en el input ya que cuando se rellena/autocompleta se pierde el focus, esto para poder seguir dentro del form y presionar la tecla Enter y hacer el submit con el boton. Gracias.
Form:
<%= f = form_for :heading, "#", phx_submit: :add_item, phx_change: :set_product, "phx-target": "#stateful-#{@id}", title: "Agregar artículo a la lista" %>
<div class="input-group ">
<%= text_input f, :product, autofocus: "true", class: "form-control", id: "InputArticulo", placeholder: "Buscar artículo...", list: "list_items", value: @product, autocomplete: "off", title: "Campo de selección de artículo para agregar a la lista" %>
<button type="submit" id="BotonAgregar" class="btn btn-success" phx-value="<%= @product %>" phx-disable-with="Agregando..." onclick="">Agregar Producto</button>
<%= hidden_input f, :item_id, value: @item_id %>
<%= hidden_input f, :order_id, value: @order_id %>
Lista:
<ul class="list-group">
<%= for item <- @items do %>
<li class="list-group-item list-group-item-action max-h-48 overflow-auto" tabindex="0" onkeydown="switchFocus(event, 1)" phx-click="select_item" phx-keydown="select_item" phx-value-item="<%= item.id %>" phx-value-name="SKU: <%= item.sku %>, Código: <%= item.value %> - <%= item.name %>">
<div class="d-flex align-items-center">
<div id="itemName" class="flex-1">
<i class="fas fa-angle-right"></i> <%= item.name %>
<p class="mb-0">sku: <%= item.sku %>, código: <%= item.value %></p>
</div>
</div>
</li>
<% end %>
</ul>