1
votes

Réinitialiser le champ de saisie du formulaire après l'envoi dans Phoenix LiveView

J'ai un formulaire dans Phoenix LiveView avec une liaison phx-submit. Le formulaire peut être soumis en cliquant sur le bouton «Envoyer» ou en appuyant sur la touche Entrée dans le champ de texte.

Mon problème est que si je soumets le formulaire en appuyant sur la touche Entrée, le champ de saisie N'EST PAS effacé, cependant si je soumets en cliquant sur le bouton, le champ de saisie EST effacé.

Je souhaite que le champ de saisie soit effacé dans les deux cas.

Ci-dessous mon formulaire:

def handle_event("send", %{"chat_form" => %{"msg" => msg}}, socket) do
  name = socket.assigns.name
  Endpoint.broadcast("chat", "new_msg", %{sender: name, text: msg})
  {:noreply, socket}
end

et mon implémentation handle_event :

<%= f = form_for :chat_form, "#", phx_submit: :send, phx_target: @myself %>
  <%= text_input f, :msg, autocomplete: "off" %>
  <%= submit "Send" %>
</form>

elixir phoenix-framework phoenix phoenix-live-view

0 commentaires

3 Réponses :

2
votes

Je pense que votre problème pourrait être lié à cela - https://github.com/phoenixframework/phoenix_live_view/issues/624 . Fondamentalement, Liveview ne modifiera pas l'entrée focalisée.

Ainsi, lorsque vous appuyez sur Entrée, vous vous concentrez sur la saisie de texte.

Mais lorsque vous cliquez sur Soumettre, votre focus devient le bouton qui permet à Liveview de réinitialiser l'entrée de texte.

Je pense qu'il y a au moins 2 solutions:

ajoutez la valeur msg à votre état, utilisez la value: @msg dans le modèle et réinitialisez-la dans handle_event (peut-être ce que j'essaierais en premier)
utiliser un hook Javascript comme suggéré dans le fil

J'espère que cela aide et j'espère que j'ai également raison!

2 commentaires

J'ai essayé d'avoir la valeur: msg dans le formulaire, puis de le réinitialiser dans l'événement handle. Cela fonctionne la première fois lorsque msg est défini, mais comme msg n'est jamais modifié, les fois suivantes, il ne fonctionne pas car les assignations ne sont pas modifiées (msg est déjà "" et est défini sur ""). Je l'ai réparé avec un crochet et push_event

Oui, ça a du sens. Je viens de me rappeler que j'avais eu un petit "gotcha" comme ça il y a quelque temps avec textarea. Espérons qu'il sera amélioré dans les versions futures.

0
votes

pouvez-vous supprimer phx_target: @myself ? Comme il est généralement utilisé si vous utilisez un lien ou un bouton pour envoyer un événement à lui-même. Si vous avez un formulaire, alors phx_submit est suffisant pour ce processus.

1 commentaires

Je ne peux pas supprimer la cible @myself. J'ai besoin de cela pour que LiveComponent gère l'événement plutôt que le LiveView parent

0
votes

Si vous utilisez l'approche value: @msg mentionnée ci-dessus et value: @msg -la à un événement phi-change sur le formulaire où vous mettez simplement à jour @msg à tout ce qui a été tapé, alors le réglage de @msg sur "" fonctionne au-delà du premier appel.

0 commentaires