Survey-library: "prev" and "next" navigation buttons have click conflict to/from first survey page

[batmanbury]

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

Reporting a bug

What is the current behavior?

When navigating back to the first page of a survey with the "prev" button, a click seems to register with both "prev" and "next" buttons. That, or a similar conflict is occurring (the plnkr and GIF below illustrates it best)

What is the expected behavior?

Clicking the "prev" button should not produce any effects associated with "next".

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

I am animating the pages to slide into view with some jquery/css. If you add click events to either button, and navigate back to the first page, you will find a conflict.

Provide the test code and the tested page URL (if applicable)

This plnkr doesn't show the css animation, but if you view the developer console while in plnkr and inspect the html elements as you click previous and next, you will see the incorrect class names being added/removed ('slideInFromLeft', 'slideInFromRight')

They are reversed when navigating to AND from the first page. The page should slide in from the right when you answer, or click next. It should slide from the left when you click previous. This is what I'm seeing locally (you can even see the incorrect button become active with focus applied):

Specify your

• browser: Chrome
• browser version: 58
• surveyjs platform jquery
• surveyjs version: 0.12.16 _dev version_

[andrewtelnov]

@batmanbury It would be nice to get your survey with your custom widget(s), so we can play with it. Could you send it to me by e-mail?

Thank you,
Andrew

[batmanbury]

@andrewtelnov As of now I'm generating the pages and questions dynamically, so give me some time to create a workable standalone jquery survey and I will send it along.

[batmanbury]

@andrewtelnov The problems may be around/within SurveyNavigation.prototype.render and SurveyNavigation.prototype.renderButton. I've edited it to render a disabled button on the first page, rather than no button at all, and the slide direction is now correct for me.

SurveyNavigation.prototype.renderButton = function (click, text, btnClassName, isPrevButton=false) {
    var style = { marginRight: "5px" };
    var className = this.css.navigationButton + (btnClassName ? ' ' + btnClassName : "");
    if (isPrevButton) {
      return __WEBPACK_IMPORTED_MODULE_1_react__["createElement"]("input", { className: className, style: style, type: "button", onClick: click, value: text, disabled: this.survey.isFirstPage });
    } else {
      return __WEBPACK_IMPORTED_MODULE_1_react__["createElement"]("input", { className: className, style: style, type: "button", onClick: click, value: text });
    }
};

[andrewtelnov]

@batmanbury Probably it is a pReact issue. Thank you for a tip, we will look at it.

[dmitrykurmanov]

@batmanbury hello, what about example for reproduce it? Could you please provide plnkr example for us?

[batmanbury]

@dmitrykurmanov @andrewtelnov Sorry! I thought I had included it in the original description.

http://plnkr.co/edit/70RZCgNGsQQEiBjgEHPZ?p=preview

If you go to the last question (question 4), don't complete the survey. Instead click Previous while looking at the developer console. You will see some console.log() statements.

If you click Previous, it should log "You clicked PREVIOUS" and if you click Next, "You clicked NEXT"

But once you hit the first page again, they trigger incorrectly, but somehow go to the correct page.

[dmitrykurmanov]

@batmanbury thank for the example, we'll check it.

[dmitrykurmanov]

@batmanbury Hello it is because of preact. Same problem as here: https://github.com/surveyjs/surveyjs/issues/405. What is your use case? You can use onCurrentPageChanged event. Here an updated plunk:
http://plnkr.co/edit/Qs0KAJkW9gfBhDAaXtrb?p=preview

Could you check it please?

[batmanbury]

That plunk looks great, much better than my workaround solution. I will implement that and see how it works in my project. @dmitrykurmanov

[batmanbury]

For anyone interested as it turns out, survey.onAfterRenderQuestion was what I ended up using for getting the animation to work properly.

When changing styles based on page changes, this is much more reliable than survey.onCurrentPageChanged.