tehwilsonator

tehwilsonator

LiveView propagate phx-change on hidden_input

Hello! I have a LiveView generated on “scheduler” model with --live, where the model has (among others) a “date_range_start” field that is a Date type. The form_component generated with date_select inputs, and I have been working on changing those into a calendar-picker LiveComponent. It’s been going great, except I’m having trouble getting the phx-change event (“validate”) to propagate when the hidden_inputs that I’ve slotted into the Calendar component change, and I’m trying to figure out why since those hidden_inputs are clearly tied to the form etc.

Some code:


  <.form
    let={f}
    for={@changeset}
    id="scheduler-form"
    phx-target={@myself}
    phx-change="validate"
    phx-submit="save">
  
    <%= label f, :title %>
    <%= text_input f, :title %>
    <%= error_tag f, :title %>
  
    <%= label f, :date_range_start %>
    <.live_component
      module={MyApp.SchedulerLive.CalendarComponent}
      id="scheduler-calendar-date_range_start"
      form={f}
      let={current_date}
    >
      <%= hidden_input f, :date_range_start, name: "#{f.name}[date_range_start][year]", value: Timex.format!(current_date, "%Y", :strftime) %>
      <%= hidden_input f, :date_range_start, name: "#{f.name}[date_range_start][month]", value: Timex.format!(current_date, "%-m", :strftime) %>
      <%= hidden_input f, :date_range_start, name: "#{f.name}[date_range_start][day]", value: Timex.format!(current_date, "%-d", :strftime) %>
    </.live_component>
    <%= error_tag f, :date_range_start %>
  
    <%= label f, :date_range_end %>

    <%= date_select f, :date_range_end %>
    <%= error_tag f, :date_range_end %>
  
    <div>
      <%= submit "Save", phx_disable_with: "Saving..." %>
    </div>
  </.form>

The CalendarComponent has no trouble choosing a current_date, and I can see the generated input type="hidden" tags changing when it does, but no "validate" event is getting handled by the LiveComponent when it does so (it is handled for all the other inputs, including that second date_select that I haven’t replaced yet). I turn to the broader community, humbly, for help with this.

Most Liked

tehwilsonator

tehwilsonator

The documentation pointed to above gives the building blocks but doesn’t put them together, so for posterity, I added a Hook with this:

Hooks.PublishInput = {
  updated() {
    this.el.dispatchEvent(
      new Event("input", {bubbles: true})
    )
  }
}

then my hidden_input tags within the slot for the calendar component got this:

      <%= hidden_input f,
        :date_range_start,
        id: "scheduler-date-range-start-year",
        'phx-hook': "PublishInput",
        name: "#{f.name}[date_range_start][year]",
        value: Timex.format!(current_date, "%Y", :strftime)
      %>

From here it can be abstracted into a helper to tidy it up, but this got me to functional. Thanks again, LostKobrakai!

LostKobrakai

LostKobrakai

Setting form values from JS by default doesn‘t trigger change events (for legitimate reasons/usecases), so you need to manually trigger them for phoenix to pick up: JavaScript interoperability — Phoenix LiveView v1.2.5

Where Next?

Popular in Questions Top

skosch
To my knowledge, put_in, Map.update etc. all have the one limitation of not automatically creating intermediate keys when needed (for exa...
New
pmjoe
I have a relationship of love and hate with Elixir. Lots of things are just absolutely right, but there are some things that are kind of ...
New
jononomo
I am trying to figure out how Mix knows whether the environment is test, dev, or prod – where is this set? Thanks.
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
LegitStack
I’m trying to make a websocket server in Phoenix or raw Elixir. I heard about gun, I think I could use cowboy, but since I’m not that sma...
New
dblack
I’ve got an issue with an app and I’ve no idea of how to troubleshoot it. I’m hoping someone here might have seen something similar. I p...
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
shijith.k
I am trying to start a new phoenix project with elixir 1.9, but mix phx.new does not work. It says that ** (Mix) The task "phx.new" could...
New
jononomo
For some reason my phoenix channels are working for me in my local dev environment, but as soon as I deploy via Docker, I get a 403 error...
New
vonH
In asking this question I am more interested about the expressiveness of the language itself and less concerned about the availability of...
New

Other popular topics Top

JakeBecker
TL;DR: I’ve just released an implementation of Microsoft’s IDE-independent Language Server Protocol for Elixir. It adds language support ...
1144 53690 245
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
electic
Hi, I am new to Elixir. I am trying to use the DateTime component to insert a date into MySQL however the there seems to be no way to fo...
New
ovidiubadita
Hey all, I discovered Elixir and I love it. I always wanted to learn a functional programming and I intended to go for Haskell, but afte...
New
johnnyicon
Hi all, I’ve just started learning Elixir and Phoenix Framework, so please pardon my n00bness at this stage. I’m trying to use Postgres...
New
stefanluptak
Hello everybody, usually, I use a 29" ultra-wide monitor for VSCode which can easily accomodate explorer (files panel) + file with code ...
New
gausby
I asked this very same question on twitter and got some interesting feedback, but I thought it would be a good question to ask here as we...
1207 39297 209
New
saif
Hello everyone, Long time lurker first time poster here. I’ve recently begun working on Elixir full-time again! :raised_hands: It’s been...
New
marick
I had some trouble figuring out how to make many-to-many associations work. Once I got it working, I wrote a blog post. Because I’m a nov...
New
openscript
Hello! Sorry for this astonishing simple question, but I’m really stuck. I try to set up the intellij-elixir plugin, but I don’t know ho...
New

We're in Beta

About us Mission Statement