formio / formio.js

JavaScript powered Forms with JSON Form Builder
https://formio.github.io/formio.js
MIT License
1.89k stars 1.06k forks source link

Save in State inconsistent behavior #2779

Closed nathanieltagg closed 9 months ago

nathanieltagg commented 4 years ago

Dear Formioians, This is with formio.js 4.9.25.

I have a form where i am using my own onSubmit function. However, the feedback to the user is inconsistent, and I'm not sure what I'm doing wrong.

I create and set up the form with: form = await Formio.createForm( element, schema, { readOnly: false}); form.submission = {data: _initialdata} form.on('submit',SubmitData);

Where my SubmitData function does:

 function SubmitData(submission) {
   <saves the data, and sets a callback call one of the following functions:>
      var isDraft = submission.

    function postSuccess(retval) {
          if((retval.error)) form.setAlert("warning",<submission warnings from server>);
            form.emit('submitDone',submission);
      }
     function postFailure() {
           form.setAlert("danger", <server warnings> );
     }

The form has both a 'Save in State' button set to save as draft, and a regular Submit button.

If the ''Save in State" button is clicked, it briefly shows a in-progress circle error, then stops. But if it's clicked again, the circle arrow doesn't go away.

If the 'Submit' button is pushed, then "Submission Complete' shows up under it, and the button remains blue. If clicked again, then the button turns green with a checkbox.

The [documentation] (https://github.com/formio/formio.js/wiki/Form-Renderer) is very hazy on how to run the Formio.js with your own AJAX code; it shows custom validation but not custom submission.

What is the correct way to do this?

wag110894 commented 4 years ago

@nathanieltagg,

Can you provide a jsfiddle of this issue occurring?

nathanieltagg commented 4 years ago

OK, here's one that shows the behavior: https://jsfiddle.net/nathanieltagg/jd3q6pk9/80/ Clicking the 'submit' button once runs the submit script, but doesn't correctly change the button. Clicking again fixes it.

However, now that I play with it, I realize that the problem appears to be a race condition: when I put in a non-zero delay on the AJAX call, the problem goes away. It appears to be an issue with the 'debouncing'.

But there seems to be NO way to make the 'Draft' button spinny arrow go away - what's the call there?

randallknutson commented 4 years ago

Is this something that needs to be tweaked in the logic around the submit/draft functionality? We'd be open to a pull request that fixes the issue.

nathanieltagg commented 4 years ago

Issue 1: Race condition (which I think is because of the convoluted next-tick logic) means that emit('submitDone') is sometimes undone. This seems to be version dependent. I have no idea how to fix it - I cannot figure out the logic with the debugger. I can't figure out why the 'onChange' is being executed after the onSubmit.

Issue 2: There is no documented way to clear the spinning-button animation on the saveDraft button.

wag110894 commented 4 years ago

@nathanieltagg

Thank you for providing additional information regarding this issue. We will need to have a developer investigate this issue for you as part of a support package. Please let me know if you are interested in having one of our developers investigate by contacting support@form.io.

We also welcome a pull request. For reference, the ticket number is FJS-932.

paulmartinjoy commented 3 years ago

Is this already fixed or still an open issue. I was using the form and the color of the button initially was set as white and when clicked it becomes transparent which is an inconsistent behaviour and the required background color reappears when somewhere outside is clicked. If the issue is already fixed, i would like to know how it is done.

VikkiAlenn commented 9 months ago

We're currently addressing a backlog of GitHub issues, and as part of this effort. Closing this thread as it is outdated. Please re-open if it is still relevant. Thank you for your contribution!