Currently, when we have Save button on collection page, pressing Save button saves changes to database. However, because this button has type Submit, pressing Enter while at any input just save changes. Same could be repro on Forms at Demohttps://demo.payloadcms.com/admin/collections/forms/64c964422ad37e39db232481
. Is there any way of preventing saving on pressing Enter, as some users are complaining?
@agolovan Are you able to remove the type="submit" from the Save button you've created?
I did not create that button - it is just Save button when we are saving data for collection. Part of standard payload CMS UI.
I do think this could be rectified inside core, seems that the save button does not follow the same pattern as the publish button
It is just button type of Submit - I pressed Enter on any input when entering data, and it is Saved. We don’t have access to code inside core.
I know, I was advocating for a fix inside core. But it looks like that is the default behavior of forms when
is pressed within an input field. So the fix I was thinking of will not work.
I think the next best thing would be to implement a custom SaveButton on your collection(https://payloadcms.com/docs/admin/components#collections
) and then lookup how to prevent this from happening by targeting the form and adding a listener to prevent the submission when pressing enter
I'm working with @agolovan on this particular item and I have come to the same conclusion of a custom button to replace the default one that still submits the form on click only. I have a working version of this (with one issue) that simply just changes the type attribute to be "button" instead of "submit".
In a core fix I would assume there would need to be a flag of some sort to offer that as an option as people would probably still want the default behavior. Hitting ENTER anywhere in the form would submit as that is typical default HTML form behavior and is probably expected.
The issue that I'm having with my work-in-progress is that if I have my custom component active in the field properties of a collection the server errors out on start with an issue with the Label scss file not compiling correctly. This seems to be a similar issue I've seen people report with the Next version but we're not using that version. I'm still investigating what the issue is exactly as we have other custom components that don't have this issue. If I have the server already running then add in my component in the collection properties the server refreshes and the component works. Which is how I know the concept works. So any advice on that scss issue to look into would be appreciated.
I tried changing just
in core, but when you are inside an input and hit
the form still submits, no?
I actually tried this in a plain HTML form in jsfiddle and actually saw the behavior you descirbe, which was a surprise to me as I was not expecting that. Looking into I two things in the spec I was not aware before. A browser has the option to decide what to do if there's no clear indication of what to do in the form. The other is that if you have only one input element in the form it will submit on enter regardless of a situation with a button within the form. Once you introduce more input elements to the form then a form submission is required at that point.
So I would wonder if your test included only a single input element?
in your fiddle did you have more than 1 input?
wow! nice digging
I did not know that having only 1 input would do that. I will make a PR to core with the updates so most forms will not submit (unless you only have 1 input, which we won't be able to prevent like you said)
I made a fiddle with numerous forms to see how each behaves in different circumstances. The unexpected submit with a form with nothing but one input element surprised me enough to go digging into the spec to understand what was going on.
Yeah I know what the workaround is, but I don't think we should implement that. The browser defaults seem to be good enough for most use cases I imagine.
I merged the PR, in the next release you will not need a custom save button to prevent this behaviour (unless you only have 1 input)