trisolaran

trisolaran

Preventing browser's default actions in LiveView

Hello! I hope you’re all enjoying your summer! (or winter if you live in the southern hemisphere)

Suppose I have a key event binding on a text input field in a form in liveview:

 <%= text_input(@form, "text_input", phx_keyup: "keyup" %>

I can handle the key event in my live view code easily. However, hitting certain keys may trigger some unwanted default action in the browser. For example, hitting “Enter” may trigger a form submit.

I can prevent these default actions using client hooks. I can capture the key event in JS and then call event.preventDefault() before sending the event to my liveview using pushEvent(). Although this works, it is less clean and more complex than doing everything in liveview.

So my questions are:

  1. Can browser’s default actions be prevented directly in LV without using client hooks? I suspect this is not possible.
  2. If it’s not possible, would it make sense to add a LV binding that disables default actions? Something like: phx-prevent-default. Would anybody else find this useful? If not, why? :slight_smile:

Thanks for any comment!

Most Liked

Xty

Xty

One approach that I have used in the past to get around the “Submit form on enter” is described in this StackOverflow post: jquery - Prevent users from submitting a form by hitting Enter - Stack Overflow

It boils down to placing a disabled invisible submit button before a visible submit button in the DOM, which will prevent the form from submitting on Enter.

mindok

mindok

Ha - found this looking for a solution. So looks like it will be a hook unless someone has a better idea…

trisolaran

trisolaran

@Xty yes that works thanks. It’s a good old trick :+1: However, that requires the ability to modify the form. My use case is a bit different: I’m developing an input component that will be used as a library by others, and I would like the component to be able to say “don’t submit on enter” because it uses the enter key as part of its internal behavior. Hooks work fine for that, and as far as I know, they are the only option for now.

Where Next?

Popular in Questions Top

pgiesin
This should be a simple problem but I just can’t seem to figure it out. I have a standalone Elixir app that won’t find the database. Dep...
New
SoCreat
i’m a new one to elixir which editor can i use vs code? or atom? Thanks! :smiley:
New
vertexbuffer
Hello, can anybody help here..? I have a list of players and I what to delete an element, but every for loop the list is reverting to ori...
New
stefanchrobot
What’s the safe way to decode a JSON string into a struct? I want to avoid calling String.to_atom. Jason.decode can give me a map with st...
New
myronmarston
The Elixir Typespec docs show the following syntax for keyword lists in typespecs: # ... | [key: type] # keyword lis...
New
baxterw3b
Hi guys, i’m new in the Elixir world, and i have to say, that i love it! i’m having some problem to understand anonymous functions with ...
New
kostonstyle
Hi all I want to have a unix time, from the current time plus 1 hour. DateTime.now + 1 hour How to get it in elixir? Thanks
New
chewm
Hi guys, nice to meet you to the whole forum, I’m new here, I’m trying to configure visual studio code for elixir, right now the intellis...
New
Qqwy
Original source of discussion: This topic on the Pragmatic Programmers' Functional Web Development with Elixir, OTP, and Phoenix forum. ...
New
joeerl
Hello again - after a longish gap I’ve decided I really must dig into Elixir and see what’s been happening here - so I have a few questio...
New

Other popular topics Top

senggen
Erlang/OTP 25 [erts-13.2.2] [source] [64-bit] [smp:8:8] [ds:8:8:10] [async-threads:1] 15:22:35.803 [error] gen_event {lager_file_backend...
New
yawaramin
In the Dialyzer docs ( http://erlang.org/doc/man/dialyzer.html#requesting-or-suppressing-warnings-in-source-files ), there is a way to tu...
New
jerry
Good day to you all. I have been struggling to get a query involving like and ilike to work. Can anyone assist me on this, please? pro...
New
axelson
This post is a wiki (feel free to hit the edit button near the bottom right of this post to add your own changes!) This post collects co...
239 45766 226
New
vertexbuffer
Hello, can anybody help here..? I have a list of players and I what to delete an element, but every for loop the list is reverting to ori...
New
freewebwithme
Using vs code and installed ElixirLS: support and debugger. And I got an error popped up on start up says Failed to run ‘elixir’ comma...
New
aadeshere1
I have a another noob question about loop. Since elixir is immutable, while loop is not directly possible. total = 10 while total != 0 ...
New
alice
Hey, Just curious what are the main benefits of Elixir compared to Clojure? When is Elixir more useful than Clojure and vice versa? Th...
New
fayddelight
I tried installing elixir 1.11.2 erlang 23.3.4 via asdf in my zsh shell. Enabled the versions locally and globally. When I list them ...
New
baxterw3b
Hi guys, i’m new in the Elixir world, and i have to say, that i love it! i’m having some problem to understand anonymous functions with ...
New

We're in Beta

About us Mission Statement