After 2 submits input fields lose the readonly attribute

[egze]

Environment

• Elixir version (elixir -v): Elixir 1.12.3 (compiled with Erlang/OTP 24)
• Phoenix version (mix deps): 1.6.2
• Phoenix LiveView version (mix deps): 0.17.5
• Operating system: macOS Monterey
• Browsers you attempted to reproduce this bug on (the more the merrier): Safari, Chrome
• Does the problem persist after removing "assets/node_modules" and trying again? Yes/no: Yes

Actual behavior

I have a form in a LiveView. One field has readonly: true.

1. After the initial load, field renders correctly as readonly. (Also has yellow background coming from input:read-only selector)
2. After the first submit, one of the fields has a validation error, and the readonly still is rendered correctly.
3. After the second submit, the field has no readonly attribute and the yellow background dissapears.

Recording of the bug:
https://user-images.githubusercontent.com/29657/141962054-31abaf37-5a51-49cc-96a1-12303b53f076.mp4

Repo to demo the bug:
https://github.com/egze/readonly_bug

Expected behavior

Fields don't lose their attributes after submits.

[ludwikbukowski]

We experience exactly the same issue! @chrismccord are you guys planning to address that one?

[mkacper]

@chrismccord I've been experiencing the same issue. Any updates on that? Happy to help if you could provide some guidance.

[jbosse]

I just ran into this today. Does anyone have any idea what causes this to happen?

[jbosse]

I think the issue is that this is a side effect of the submit process:
https://hexdocs.pm/phoenix_live_view/form-bindings.html#javascript-client-specifics

On submission of a form bound with a phx-submit event:

The form's inputs are set to readonly
Any submit button on the form is disabled
The form receives the "phx-submit-loading" class

[jbosse]

My current workaround is two-fold

1. modify core_components.ex

  def input(assigns) do
    ~H"""
    <div phx-feedback-for={@name}>
      <.label :if={@label} for={@id}><%= @label %></.label>
      <input
        type={@type}
        name={@name}
        id={@id || @name}
        value={Phoenix.HTML.Form.normalize_value(@type, @value)}
        data-readonly={@rest[:readonly]}
        {@rest}
      />
      <.error :for={msg <- @errors}><%= msg %></.error>
    </div>
    """
  end

2. modify app.js

window.addEventListener("phx:page-loading-stop", _info => {
  topbar.hide()
  document.querySelectorAll("[data-readonly]").forEach(element => element.readOnly = true)
})

[SteffenDE]

Hey there, I worked on a PR for this. You can try {:phoenix_live_view, github: "SteffenDE/phoenix_live_view", branch: "disabled_readonly_fixes_assets", override: true} in your mix.exs file.