onSubmit not working with slicemachine

Hello. Im building a form and onSubmit does not work when using slice-machine

I'm building with react and onSubmit does trigger when i add the slice to an actual page. Just a bit anying when one want to debug with only the slice preview.

Is this an expected behavior?

Hello @nicklas.oest, It sounds like this is more related to the Front end of your project than to your Slices. What is the solution you are trying to find within Prismic?

Well i don't know how the slicemachine preview is supposed to work since I did not build it :slight_smile: this is a nextjs project using the latest slichmachine. It works flawlessly once the slice is used on a page as stated earlier.

Can you give us a visual example of when this isn't working?
A screen recording would be very helpful.

So here is a minimal example of a slice where the issues exists. The onSubmit binding works just fine when the slice is used on a page. But for development purposes it would be nice if it worked even in the slice preview.

return (
    <>
      <form onSubmit={() => console.log('onSubmit form')}>
          <input id="name" placeholder="Enter your name" />       
        <button className="
            w-full
            px-6
            py-2.5
            bg-blue-600
            text-white
            font-medium
            text-xs
            leading-tight
            uppercase
            rounded
            shadow-md
            hover:bg-blue-700 hover:shadow-lg
            focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0
            active:bg-blue-900 active:shadow-lg
            transition
            duration-150"type="submit">Submit button in form with onSubmit binding</button>
      </form>

      <br/>

      <button className="            w-full
            px-6
            py-2.5
            bg-blue-600
            text-white
            font-medium
            text-xs
            leading-tight
            uppercase
            rounded
            shadow-md
            hover:bg-blue-700 hover:shadow-lg
            focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0
            active:bg-blue-900 active:shadow-lg
            transition
            duration-150" onClick={() => console.log('button clicked')}>Other button with click binding.</button>

    </>
  );

Gif
onsubmit not working

I understand, thanks for the clarification.
For the moment this is not a built-in functionality in Slice Machine.
I'll add a feature request tag to your thread so we can keep it in mind for future changes.
Thanks

1 Like

Thank you :slight_smile: