komlanvi

komlanvi

LiveView phx-change attribute does not emit event on input text

Hi everyone,

I was playing with phoenix liveView but I run into an issue. I have a form and want to validate each input text when the text change. So I added phx-change attribute on every input (I only have text, email and password field) but it does not emit any event when the text of any of my input field change. Strangely It emits an event when instead of phx-change I use phx-click. Am I adding the wrong attribute?
On React I used to add onChange={myCallback} attribute on text input, is there something similar? I checked phoenix_live_view.js doc but can’t find a solution. Could someone help me?

First 10 of 33 Posts Switch mode

chrismccord

chrismccord

Creator of Phoenix

Today we require the phx-change to be on the parent form, not individual inputs

komlanvi

komlanvi OP

Thank you for the reply. Is this a design choice or it will probably be added in a near future?

chrismccord

chrismccord

Creator of Phoenix

At the moment I’m not planning on making it per input because you can get what you want with the form events, and every event will have all the form input so it’s generally a better approach.

OvermindDL1

OvermindDL1

Doesn’t that mean you can’t quite as easily have composible form elements? Instead you’ll need to compose everything manually in code for each given form and all possible fields that it might dynamically have. In Drab I just use a drab child commander to add those and it is all very compartmentalized, so this would be a very useful feature in liveview.

chrismccord

chrismccord

Creator of Phoenix

I need to see concrete use cases first before settling on a broader API. Having the top-level form control its input is preferred because it’s generally what you want event wise, where a single change event provides the current client form state. More critically, it also allows us to more easily control the loading/disabled/patch states of form events where ad-hoc components make this more difficult, and open up race conditions to a programmer concern instead of library concern. For example, LV can lock the form or defer patches to the form before a server acknowledgement from the pushed form event, where ad-hoc inputs would not. So my current preference is to nail down the loading state and deferred patch handling at the form level and see if we need to go further from that base.

OvermindDL1

OvermindDL1

My initial thought is an autocomplete input, I want the input code to handle that, not the form itself as it doesn’t care, and adding that to every form’s handler just in the off chance the autocomplete version is used in the HTML is extra mental bandwidth to handle, plus however many other plugins the overall system will include over time. The autocomplete input is the precise use that I use a drab submodule for. In HTML all I have to do is craft an html element with special drab-* attributes and it auto-registers and hooks in the child commander, which uses the information in the attributes to know which autocomplete list to pull from (which can even push updates in real time without typing changes if the autocomplete list has backend changes). :slight_smile:

10
Post #6
Owens

Owens

Why can’t you just use phx-keyup for individual form elements? That’s what I’m using and it works great.

OvermindDL1

OvermindDL1

You can, but you still have to tie it into the backend somehow, the frontend is not the issue. ^.^

Owens

Owens

phx-keyup will pass the value of the input to the handle_event function which you can use to return the autocomplete options. Is that what you are trying to do?

OvermindDL1

OvermindDL1

Not me, I’m referencing putting in pre-built blocks into a page. For example, drab allows you to do something like <div drab-commander="MyCommander">...</div> and the div and everything in it is controlled by an entirely different commander (like a liveview socket) rather than the main one, allowing you to break up functionality and re-use it in a trivial manner.

Though perhaps you meant to reply to the OP rather than my post? ^.^;

Where Next?

Trending in Questions Top

jonnycharles
I’m in search of an Elixir library that offers PDF generation capabilities similar to Ruby’s Prawn. While there have been discussions abo...
New
spammy
I’m looking to build a personal workflow to quickly deploy web applications written in elixir/phoenix, for local consumption (ie not on t...
New
silverdr
Using Phoenix.LiveView.TagEngine as an EEx.Engine is deprecated! To compile HEEx, use Phoenix.LiveView.TagEngine.compile/2 instead. Sta...
New
dli
Before I dive in myself, did anyone successfully sprinkle Hologram into their existing LiveView app? Looking for hints regarding: Addi...
New
bottlenecked
Hi all, I wanted to ask how the community is dealing with post-release steps. Today we have Ecto migrations, which make sure that the db...
New
michallepicki
I am using Oban and occasionally, shortly after a deployment, a handful of jobs can fail because of dependency on other parts of the syst...
New
rahultumpala
Hello, I have an Elixir backend that implements a custom protocol over TCP. I want to load test the backend and assess the performance o...
New

Other Trending Topics Top

JesseHerrick
Hey, I’m Jesse and I’m the main contributor behind Dexter, a full-featured, lightning-fast Elixir LSP optimized for large codebases. It s...
New
jimsynz
Beam Bots (or just BB for short) is a framework for building fault-tolerant robotics applications in Elixir using familiar OTP patterns. ...
New
Damirados
Hello everyone. After busy few months I am happy to announce v0.1.0 of Emerge &amp; Solve. They are GUI (Emerge) and State management (S...
New
ausimian
Emily is an Elixir library that runs Nx computations on Apple’s MLX. Install it as the default Nx backend and Nx, defn, Axon, Nx.Serving,...
New
type1fool
I just stumbled on a newly redesigned elixir-lang.org. :tada: It looks like @Software_Mansion did the work, and I think it is generally a...
New
akoutmos
@hugobarauna and I (Alex Koutmos) have been hard at work on writing a book on Nerves that takes you from simply blinking LEDs to building...
New

We're in Beta

About us Mission Statement