phoenixframework / phoenix_live_view

Rich, real-time user experiences with server-rendered HTML

Home Page:https://hex.pm/packages/phoenix_live_view

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Submit button not disabled in generated live form

Eiji7 opened this issue · comments

Environment

In general everything is up-to-date

  • Elixir version (elixir -v):
$ asdf current
# (…)
elixir          ref:v1.17.0     $HOME/.tool-versions
erlang          27.0            $HOME/.tool-versions
# (…)
  • Phoenix version (mix deps):
$ mix deps
# (…)
* phoenix 1.7.13 (Hex package) (mix)
  locked at 1.7.13 (phoenix) 207ce8f4
  ok
# (…)
  • Phoenix LiveView version (mix deps):
$ mix deps
# (…)
* phoenix_live_view 1.0.0-rc.1 (Hex package) (mix)
  locked at 1.0.0-rc.1 (phoenix_live_view) ffc940d7
  ok
# (…)
  • Operating system:
$ cat /etc/gentoo-release 
Gentoo Base System release 2.15
  • Browsers you attempted to reproduce this bug on (the more the merrier):
Firefox Nightly 129.0a1 (2024-06-18) (64 bits)
  • Does the problem persist after removing "assets/node_modules" and trying again? Yes/no:
    Note: The directory assets/node_moduoes does not exists …

Actual behavior

I have simply created an example application using commands below:

$ mix phx.new example
$ cd example
$ mix ecto.create
$ mix phx.gen.live Blog Post posts title:string body:text
$ mix ecto.migrate
$ mix phx.server

and changed routings starting with /posts to / in order to simply replace the main page.

So I have tried to create some posts and accidentally clicked 2 times on submit button. I got 2 posts which is terribly weird behaviour. I have tried to reproduce it few times using also auto-clicker app. In such simple scenario I was able to create 2 or sometimes even 3 posts.

I did not found any errors in both consoles, no missing assets, internal server errors or JavaScript problems. However both consoles clearly shows that the same submit event was correctly triggered just like the submit button was not disabled at all and the only thing that prevent creating more posts was closing dialog.

Expected behavior

The templates generated by default should prevent creating multiple records from same form.

IIUC the relevant code (HTML template) is here https://github.com/phoenixframework/phoenix/blob/e99f657f1cc9062fca0f2b8b79bc90659d8bd514/priv%2Ftemplates%2Fphx.gen.live%2Fform_component.ex#L15-L26

Not on a computer right now to be more helpful, but wanted to leave a note in case anyone wants to look at this.

Sounds like a double form submission issue.

As a sanity check, please try rc.2 as we had a regression with rc.1 involving locked forms. Thanks!

@chrismccord Unfortunately this does not solve the problem. Regarding regression it's unfortunately not even related. I have tried mix archive.install hex phx_new 1.7.12 command and then I did everything once again. The results are exactly same, so it's not only rc releases issue.

$ mix deps
# (…)
* phoenix 1.7.14 (Hex package) (mix)
  locked at 1.7.14 (phoenix) c7859bc5
  ok
# (…)
* phoenix_live_view 0.20.15 (Hex package) (mix)
  locked at 0.20.15 (phoenix_live_view) 45c48ad1
  ok
# (…)

The environment is exactly the same.

Just for sure I'm able to do it "by hand", but also I'm testing it with XClicker (AppImage version).

0.20.15 actually has the same problem as rc.1, there’s no fix for 0.20 yet…

If it’s not that I can probably look into it tomorrow :)

@SteffenDE Ok, so in the same project I have tried setting this {:phoenix_live_view, "== 0.20.14"} as dependency and just for sure I've removed mix.lock, deps and _build, so I fetched and compiled all of the dependencies. Unfortunately I've got again same results, so it looks like that this issue is older than we suspect.

$ mix deps
# (…)
* phoenix 1.7.14 (Hex package) (mix)
  locked at 1.7.14 (phoenix) c7859bc5
  ok
# (…)
* phoenix_live_view 0.20.14 (Hex package) (mix)
  locked at 0.20.14 (phoenix_live_view) 82f6d006
  ok
# (…)

Let me know if I should try other versions too.

I have verified latest commit on main branch and everything seems to work, thanks. 👍