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>
3 Réponses :
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:
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)J'espère que cela aide et j'espère que j'ai également raison!
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.
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.
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
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.