I’ve got a Phoenix LiveView that is updating part of its state every second.

I need to allow certain users to update a different part of the state at any point. I built this widget to do so:

<div class="tw-text-3xl tw-font-bold tw-relative tw-group">
  <.countdown_widget
    label="T‒0"
    duration={Timex.diff(@state._meta.now, @state.t0, :duration)}
  />
  <%= if {@is_director} do %>
    <div class="tw-absolute tw-top-[100%] tw-inset-x-0 tw-hidden group-hover:tw-block group-focus:tw-block tw-z-10" role="none">
      <form action="javascript:"><input
        type="datetime-local"
        name="t0"
        title="T‒0"
        value={Timex.format!(@state.t0, "%Y-%m-%dT%H:%M:%S", Timex.Format.DateTime.Formatters.Strftime)}
        phx-change={JS.push("set_t0")}
        step="1"
      /></form>
    </div>
  <% end %>
</div>

however, this doesn’t seem to work. On Chrome and Edge (which will be the only options in prod), the input field is reset to be empty every time @state._meta.now ticks.

Is there any way to freeze the input so it can’t be updated by the server while it’s selected by the user?