Pressing Enter key in a "text" question while input field is in Focus resets survey (React)

[howardwkim]

Are you requesting a feature, reporting a bug or asking a question?

How do I prevent the survey from resetting when I hit enter in a text input field?

What is the current behavior?

In certain text input fields, pressing the enter key (desktop and mobile) resets the survey.

What is the expected behavior?

The expected behavior is for nothing to happen.

How would you reproduce the current behavior (if this is a bug)?

Install the SurveyJS React quickstart boilerplate github link.

Go the very last question which is type "text". Click on the input field so that it is in focus, then press enter (or add some text and press enter). Survey will reset.

Alternatively, remove all questions from the React boilerplate except for a type "text" question. Click on the input field so that it is in focus, then press enter.

I ran into the same issue with the input field for the "Other" option in Radiogroup and in the Multitext question if there is only a single text input (if there are two input fields for Multitext, the resetting issue does not happen).

Specify your

• browser: Chrome (desktop & mobile)
• browser version: 71.0.3578.98
• surveyjs platform (angular or react or jquery or knockout or vue): React
• surveyjs version: "latest"
• survey-react version: "latest"

[dmitry-kurmanov]

Hello! Thank you for the reporting. If I understand you correctly I can't reproduce the problem.

I've cloned the repo then installed npm packages, added text question to the end of the survey and then ran it, focused last text question and pressed enter.

The problem might be in survey-react version, could you please try npm update?

[howardwkim]

I tried npm update, same issue. My package.json has "survey-react": "latest". I found a workaround using jquery with the following:

    survey.onValueChanged.add(function(survey, options) {
      $(document).ready(function() {
        $(window).keydown(function(event){
            if((event.keyCode === 13)) {
                event.preventDefault();
                return false;
            }
        });
      });
    });

Not ideal, but it gets the job done. Thank you for looking into it.

[dmitry-kurmanov]

@howardwkim may be you have add some code to the "surveyjs_react_quickstart" repo? It is really strange and if we are able to reproduce it then I will fix it without workarounds.

[dmitry-kurmanov]

@howardwkim may be related to https://github.com/surveyjs/surveyjs/issues/1544

[wagnermaciel]

@dmitrykurmanov I'm having the same issue. I believe the form tag is causing this. We are using survey-react version 1.0.75

As a workaround we are preventing default with javascript on the form html tag.

[chemaxa]

Also have this issue

My workaround

$('form').on('submit', e => {
      e.preventDefault();
      if (survey.isLastPage) {
        survey.complete();
      } else {
        // survey.nextPage Not working in "survey-react": "1.0.60"
        $('.sv_next_btn').trigger('focus'); // Hack for surveyjs
        survey.nextPage();
      }
    });

[jamesrwaugh]

This is more of an issue with the html <form> SurveyJS creates, there are a bunch of similar solutions on how to prevent the page reload on enter key out there, like https://stackoverflow.com/questions/8866053/stop-reloading-page-with-enter-key

I came up with the following compartmentalized SurveyJS-reacty workaround.

class EnterMoveableSurvey extends Survey.Survey {
  componentDidMount() {
    const node = ReactDOM.findDOMNode(this) as HTMLElement;
    node.addEventListener("submit", (ev: Event) => {
      ev.preventDefault();
      if(this.survey.isLastPage) {
        this.survey.complete();
      } else {
        this.survey.nextPage();
      }
    });
  }
}

Then embed EnterMoveableSurvey instead.