Prevent saving on enter when we have Submit type button on page

agolovan

last month

11

• 

  notchr

  last month

  @agolovan Are you able to remove the type="submit" from the Save button you've created?

• 

  agolovan

  last month

  I did not create that button - it is just Save button when we are saving data for collection. Part of standard payload CMS UI.

• 

  jarrod_not_jared

  Payload Team

  last month

  I do think this could be rectified inside core, seems that the save button does not follow the same pattern as the publish button

• 

  agolovan

  last month

  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.

• 

  jarrod_not_jared

  Payload Team

  last month

  I know, I was advocating for a fix inside core. But it looks like that is the default behavior of forms when

  enter

  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

• 

  talmand

  last month

  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.

• 

  jarrod_not_jared

  Payload Team

  last month

  I tried changing just

  submit

  to

  button

  in core, but when you are inside an input and hit

  enter

  the form still submits, no?

• 

  talmand

  last month

  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?

• 

  jarrod_not_jared

  Payload Team

  last month

  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)

  
  

  
  

  PR here:

  https://github.com/payloadcms/payload/pull/3115
• 

  talmand

  last month

  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.

  
  

  
  

  By the way, you could potentially prevent the single input element submission but would require an enter key block on the element or form level with JavaScript. Probably not worth bothering with and I kind of agree with the single input element submission behavior anyway.

• 

  jarrod_not_jared

  Payload Team

  last month

  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)