Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix readonly and disabled state not resetting properly #3009

Merged

Conversation

SteffenDE
Copy link
Collaborator

Fixes #2993
Fixes #1759

Hey there @chrismccord, while working on #1759 I noticed that your recent fix for #2993 actually breaks submit buttons in forms (as seen in the repro below) from restoring their disabled state. You can see this when changing the script src to LV main:

Application.put_env(:sample, Example.Endpoint,
  http: [ip: {127, 0, 0, 1}, port: 5001],
  server: true,
  live_view: [signing_salt: "aaaaaaaa"],
  secret_key_base: String.duplicate("a", 64),
  pubsub_server: MyPubSub
)

Mix.install([
  {:plug_cowboy, "~> 2.5"},
  {:jason, "~> 1.0"},
  {:phoenix, "~> 1.7.10", override: true},
  {:phoenix_live_view, github: "phoenixframework/phoenix_live_view", branch: "main"}
])

defmodule Example.ErrorView do
  def render(template, _), do: Phoenix.Controller.status_message_from_template(template)
end

defmodule Example.HomeLive do
  use Phoenix.LiveView, layout: {__MODULE__, :live}

 def mount(_params, _session, socket) do
    socket
    |> then(&{:ok, &1})
  end

  def render("live.html", assigns) do
    ~H"""
    <script src="https://cdn.jsdelivr.net/npm/phoenix@1.7.10/priv/static/phoenix.min.js"></script>
    <%!-- <script src="https://cdn.jsdelivr.net/gh/phoenixframework/phoenix_live_view@main/priv/static/phoenix_live_view.js"></script> --%>
    <script src="https://cdn.jsdelivr.net/gh/SteffenDE/phoenix_live_view@disabled_readonly_fixes_assets/priv/static/phoenix_live_view.min.js"></script>
    <%!-- <script src="http://localhost:8000/priv/static/phoenix_live_view.js"></script> --%>
    <script>
      let liveSocket = new window.LiveView.LiveSocket("/live", window.Phoenix.Socket, {
        hooks: {
          FakeHook: {
            mounted() {}
          }
        }
      })
      liveSocket.connect()
    </script>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
      * { font-size: 1.1em; }
    </style>
    <%= @inner_content %>
    """
  end

  def handle_event("validate", _params, socket) do
    {:noreply, socket}
  end

  def handle_event("save", params, socket) do
    Process.sleep(1000)

    {:noreply, socket}
  end

  def handle_event("test-html", _params, socket) do
    Process.sleep(1000)

    {:noreply, socket}
  end

  def render(assigns) do
    ~H"""
    <form id="upload-form" phx-submit="save" phx-change="validate">
      <input type="text" name="a" readonly value="foo" class="read-only:bg-green-200" />
      <input type="text" name="b" value="bar" class="read-only:bg-green-200" />
      <button type="submit" phx-disable-with="Submitting" class="border border-black disabled:bg-gray-500">Submit</button>
    </form>

    <button phx-click="test-html" class="bg-gray-900 text-white rounded-lg p-4 disabled:bg-gray-300">HTML Button</button>
    <button phx-click="test-html" phx-disable-with="Loading..." class="bg-gray-900 text-white rounded-lg p-4 disabled:bg-gray-300">
      Broken HTML Button
    </button>
    """
  end
end

defmodule Example.Router do
  use Phoenix.Router
  import Phoenix.LiveView.Router

  pipeline :browser do
    plug(:accepts, ["html"])
  end

  scope "/", Example do
    pipe_through(:browser)

    live("/", HomeLive, :index)
  end
end

defmodule Example.Endpoint do
  use Phoenix.Endpoint, otp_app: :sample
  socket("/live", Phoenix.LiveView.Socket)
  plug(Example.Router)
end

{:ok, _} = Supervisor.start_link([Example.Endpoint, {Phoenix.PubSub, name: MyPubSub}], strategy: :one_for_one)
Process.sleep(:infinity)

This PR changes the way the readonly attribute is restored to be the same as the disabled value (the fix for #1759).

@chrismccord chrismccord merged commit cdb4497 into phoenixframework:main Jan 15, 2024
4 checks passed
@chrismccord
Copy link
Member

❤️❤️❤️🐥🔥

SteffenDE added a commit to SteffenDE/phoenix_live_view that referenced this pull request Jan 15, 2024
SteffenDE added a commit to SteffenDE/phoenix_live_view that referenced this pull request Jan 15, 2024
SteffenDE added a commit to SteffenDE/phoenix_live_view that referenced this pull request Jan 15, 2024
chrismccord pushed a commit that referenced this pull request Jan 17, 2024
playwright e2e tests


references #3009
references #2993
references #1759

* build assets in e2e pipeline

We want to run the e2e tests with the latest assets without the need to
commit them to the repository. Otherwise we would not see test
failures from changes to the js code as early as possible.
chrismccord pushed a commit that referenced this pull request Jan 17, 2024
chrismccord pushed a commit that referenced this pull request Jan 17, 2024
playwright e2e tests


references #3009
references #2993
references #1759

* build assets in e2e pipeline

We want to run the e2e tests with the latest assets without the need to
commit them to the repository. Otherwise we would not see test
failures from changes to the js code as early as possible.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

"phx-disable-with" disables button completely After 2 submits input fields lose the readonly attribute
2 participants