PJUllrich
Feature Request: Ignore "change" events of specific form inputs in LiveView
Hey folks, I have the unique problem that I need to ignore all “change” and “input” events for one specific input element in a LiveView Form because these events are handled by a 3rd party JS library. That library (QuillJS) adds its own eventListener to the input field which creates a race condition with LiveView’s eventListener.
An example:
<.form for={@form} phx-change="validate">
# Changes to this input should send the "validate" event.
<.input form={@form[:name]} type="text" />
# Changes to this input should be ignored and not send the "validate" event.
<select contenteditable="false">
<option value="foo">Foo</option>
<option value="bar">Bar</option>
</select>
</.form>
I tried these solutions, but none of them worked:
- Put
phx-update="ignore"on theselectinput.- The phx-update flag only ignores changes coming from the server, not from the client to the server.
- Put a custom
phx-change="ignore"attribute on theselectinput.- This still sends an “ignore” event to the server which sends back an update which breaks my 3rd party library (quill editor calling highlight.js for syntax highlighting)
- Put
onchangeandoninputattributes with anevent.stopPropagation()orevent.preventDefaults()call on theselectinput.- These don’t seem to have an effect. I guess because LiveView puts an
form.on("change", fn)listener on the form.
- These don’t seem to have an effect. I guess because LiveView puts an
- Add a custom
eventListenerto theselect-input which callsevent.stopPropagation()orevent.preventDefaults().- Had no effect. The “validate” event was still sent to the server.
- Remove the `phx-change=“validate” from the form altogether.
- That worked, but now I can’t validate the form before it’s submitted.
Ideally, LiveView would respect an phx-update="ignore" attribute and ignore any “change” and “input” events from that input, which means not sending a “validate” event back to the server.
The code in question
Prior discussions about this topic
https://github.com/phoenixframework/phoenix_live_view/issues/3153
Most Liked
LostKobrakai
Sounds like LV should ignore input events from inputs without names. Their values won’t make it to the server anyways, because inputs without names don’t send data within a form.
vtno
@chrismccord It works!
@PJUllrich What I did was adding this hook and use it on the input I don’t want to trigger phx-change
const StopPropagation = {
mounted() {
events = this.el.dataset.stopEvent.split(",");
events.forEach(event => {
this.el.addEventListener(event, (event) => {
console.debug('StopPropagation stopped', event);
event.stopImmediatePropagation();
event.stopPropagation();
});
});
}
};
export default StopPropagation;
# markup code
<input
id={"email_checkbox_#{idx}"}
type="checkbox"
# other attrs...
data-stop-event="change,input"
phx-hook="StopPropagation"
/>
This is quite useful when building a complex form where some sections are toggled with checkbox or etc.
LostKobrakai
An input without a name would already not be sent, because there’s no key. You cannot encode what doesn’t exist.
Popular in Proposals: Ideas
Other popular topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
Move fast and fix things! Error tracking with less noise for Elixir devs who love to ship. Start your free dev account.
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #channels
- #elixirconf
- #exunit
- #discussion
- #code-sync
- #javascript
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #phoenix_html
- #iex
- #blog-post
- #graphql
- #genstage
- #ai
- #websockets
- #supervisor
- #advent-of-code
- #elixirconf-us
- #distillery
- #processes
- #forms
- #api
- #metaprogramming
- #security
- #performance
Our Sponsors
Build Elixir applications with speed and confidence.
Supporting innovation across the BEAM ecosystem.
We build reliable cloud platforms for business-critical systems.
Catch errors, track performance, monitor hosts and more.
Error tracking for Elixir devs who love to ship. Start your free account.
Practical resources that improve the lives of professional developers.
Develop your skills with books, videos, and courses.
The deployment platform built for Elixir: PaaS ease, VPS control.
The team behind Membrane, Popcorn, LiveDebugger. Available for hire.
Courses that'll move you from confusion to "Aha, now I get it!"