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: https://stackoverflow.com/a/51507806

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

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
myronmarston
The Elixir Typespec docs show the following syntax for keyword lists in typespecs: # ... | [key: type] # keyword lists...
New
shahryarjb
Hello, I get Persian date from my client and convert it to normal calendar like this: def jalali_string_to_miladi_english_number(persi...
New
fireproofsocks
I’m working on defining a simple Ecto schema for a table (in PostGres), but I don’t see where I can define a column as NOT NULL. Conside...
New
fireproofsocks
Forgive me if this is obvious, but how does one delete a database record WITHOUT selecting it first? Ecto.Repo — Ecto v3.14.0 has exampl...
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
ycv005
I have followed this StackOverflow post to install the specific version of Erlang. And When I am running mix ecto.setup then getting fol...
New
vonH
When I run the Plug and I recompile I wind up having to use Ctrl C to quit iex and start again. Witht the help of rlwrap I can use the cu...
New
nsuchy
Hi. I’ve noticed that Windows Powershell has it’s own IEX command and you cannot access Elixir’s IEX due to the conflict. This isn’t a cr...
New
PeterCarter
There are pre-rolled solutions for other frameworks that do work. However, Phoenix does not seem to have these. Have people had good expe...
New

Other popular topics Top

malloryerik
Hi, this is for people who, like me, have had some friction using .html.heex templates in VSCode. The solution seems to be, in a hyphena...
New
marius95
Hello everyone, I try to use an Javascript Event Handler in my root.html.leex file. Therefore I created a function in the app.js file: ...
New
Darmani72
If I have a post route which an argument: post /my_post_route/:my_param1, MyController.my_post_handler How would get the post params ...
New
mcarvalho
What is the difference between System.get_env and Application.get_env? For example, what are best practices to use one versus another.
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
SoCreat
i’m a new one to elixir which editor can i use vs code? or atom? Thanks! :smiley:
New
Emily
I have VueJS GUIs with the project generated using Webpack. I have Elixir modules that will need to be used by the VueJS GUIs. I forese...
New
Qqwy
Update: How to use the Blogs &amp; Podcasts section You can post links to your blog posts or podcasts either in one of the Official Blog...
3271 127089 1222
New
AstonJ
Seen any cool LiveView demos, sample apps or examples? Please post them here! :003:
New
lanycrost
Hi everyone! I need implement if…else if…else condition from my elixir code, and anymore of this control flow structures not work proper...
New

Latest on Elixir Forum

Elixir Forum

We're in Beta

About us Mission Statement