search

nuxt / ui

A UI Library for Modern Web Apps, powered by Vue & Tailwind CSS.
https://ui.nuxt.com
MIT License
3.45k stars 383 forks source link

form submit not prevented #610

Closed cirolosapio closed 8 months ago

cirolosapio commented 9 months ago

Version

@nuxthq/ui: 2.7.0 nuxt: 3.7.0

Reproduction Link

repro

Steps to reproduce

What is Expected?

the form should be submitted and the an alert would appear

What is actually happening?

the form submission is not prevented and the page is refreshed

https://github.com/nuxtlabs/ui/assets/33943143/b0f06208-cdb5-46ea-92fe-6fcfb1532ffa

cirolosapio commented 9 months ago

after some tests i see that it happens even with normal behavior

cirolosapio commented 9 months ago

it seems to be an ssr related issue i'm barely new in the ssrland surrounding the form with a v-if value setted on mounted seems to resolve the issue but why is so slow in dev mode? it takes 10/15 seconds to show

madebyfabian commented 9 months ago

Hi there, I ran your reprod at https://stackblitz.com/edit/github-edpgxa and it seems that it doesnt refresh the page and shows the alert correctly. Is this issue still happening?

cirolosapio commented 8 months ago

yes, this happens because the page is not fully hydrated you shuld fill the form faster

AndrewBogdanovTSS commented 8 months ago

@cirolosapio do I understand correctly that you want page with no JS to NOT refresh when you use standard HTML form component with a submit button?

cirolosapio commented 8 months ago

@AndrewBogdanovTSS yes with js, if I use @submit.prevent="doSomething()" the refresh should be prevented afaik

AndrewBogdanovTSS commented 8 months ago

Prevented with what? Holy spirit? :) You need JS to prevent anything. If you don't want to wait till Nuxt is initialized with all of it's client side JS you will have to write some pre-script that would do it for you. But that is on your own risk since it's no-concern of this library

benjamincanac commented 8 months ago

Closing this as it's not related to Nuxt UI as mentioned above and not related to the UForm component as you're using a simple <form>.

AndrewBogdanovTSS commented 8 months ago

@benjamincanac it doesn't matter if @cirolosapio is using UForm or a "simple form", at the end of the day it's all "simple HTML components" that work by fundamental rules of the web, and in the browser, the entity that "prevents" default behavior from happening is client-side JS. What do you think .prevent="... is compiled to? It's compiled to "e.preventDefault()" which is a JS function that can't execute before everything is hydrated, this is just how browsers work. So original ask can be more vividly formulated by "I disabled JS in my browser but I want it to work"

cirolosapio commented 8 months ago

sorry I wasn't clear :) when I specified that it also happens with the normal form I meant that the problem is not related to this library

write some pre-script that would do it for you

@AndrewBogdanovTSS can you please elaborate on this

I'm also wondering why with nuxt it takes 15 seconds to load the form 🤔

AndrewBogdanovTSS commented 8 months ago

@cirolosapio I don't know what device you are using for development, I may agree that on Commodore 64 it can take 15 seconds, but for both me and @madebyfabian who simply can't reproduce the issue because "we don't click fast enough" it's definitely less than 15 seconds, don't you think? Before using any UI libraries you need to learn how JavaScript works in the browser. Maybe go to YouTube or Udemy and watch a free "Getting Started with JS" course - that will provide proper elaboration on the topic. Regarding a pre-script - it's just a matter of running JS code with high priority that would execute before Vue hydration is done. But take into account that if overall hydration takes 15 seconds for you, your pre-script execution may take 10 - so you won't win a lot

cirolosapio commented 8 months ago

@AndrewBogdanovTSS

i've update the repro

in dev mode on stackblitz on my pc it takes up to 5 seconds to show the form can you check how much time it takes on yours :)

benjamincanac commented 8 months ago

Have you tried disabling the devtools? I've had situations where it was slowing down my apps.

cirolosapio commented 8 months ago

Have you tried disabling the devtools? I've had situations where it was slowing down my apps.

yes, no luck

AndrewBogdanovTSS commented 8 months ago

I ran your repo on my Commodore 65 and this is the hydration time I get 3.231201171875 ms which is a couple thousand times less than 15 seconds. Sorry, but I can't submit a form in 2ms to see the issue

cirolosapio commented 7 months ago

fyi it does not happes anymore same repo same versions maybe my pc was corrupted

cirolosapio commented 7 months ago

one thing that I changed is that on my pc I had a nuxt app running with NUXT_HOST and NUXT_PORT values in the .env file, those were db credentials and it seems to break some behaivor