0

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>

Input y lista rendereada

Al seleccionar se pierde el focus dentro del input Input sin el focus activo

4
  • en el código que pones no hay javascript, más bien, me parece Ruby Commented el 22 jun. 2021 a las 16:50
  • es HTML/Elixir es parecido a Ruby pero tambien acepta scripts de javascript, crei que la solucion tambien puede ser de esa manera. Commented el 22 jun. 2021 a las 16:52
  • En teoría igual que metes el contenido en el input, puedes situar sobre este el foco en el mismo momento. Si no es así, asignále un observer al input, que ponga el foco cuando cambie su contenido developer.mozilla.org/es/docs/Web/API/MutationObserver
    – Orici
    Commented el 22 jun. 2021 a las 17:31
  • En esta respuesta a tu pregunta anterior no se pierde el foco. En todo caso, esta pregunta está incompleta porque falta el código con el que seleccionas el valor y lo asignas al campo.
    – Triby
    Commented el 22 jun. 2021 a las 18:09

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.