Page navigation doesn't work when the scrollbar is hidden

hoolie commented 1 year ago

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

bug

What is the current behavior?

When survey-creator does not have a scrollbar, the navigation of a page using the buttons to directly accessing the page (class='svc-page-navigator-item') does not work in pageEditMode: "standard". The page does not scroll into view and does not get highlighted. Navigation via the "Select page..." popup does work as expected.

What is the expected behavior?

Accessing the page using the svc-navigator-items highlights the page and scrolls it into view.

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

Variant A:

On a 2K QHD Monitor (2560x1440) or bigger: open the Survey Creator demo from the surveyjs page in fullscreen (https://surveyjs.io/survey-creator/examples/s/free-nps-survey-template/reactjs/default)
remove all questions
add a rating scale to page 1
add a rating scale to page 2
click the navigate page1 / page 2 buttons

Variant B:

open the Survey Creator demo from the surveyjs page in fullscreen (https://surveyjs.io/survey-creator/examples/s/free-nps-survey-template/reactjs/default)
open dev tools
change the height property from the surveyCreatorContainer from 100vh to 300vh document.querySelector('#surveyCreatorContainer').style.height = '300vh'

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

Tested page URL: https://surveyjs.io/survey-creator/examples/s/free-nps-survey-template/reactjs/default

Test code

{
 "title": "NPS Survey Question",
 "completedHtml": "<h3>Thank you for your feedback</h3>",
 "completedHtmlOnCondition": [
  {
   "expression": "{nps_score} >= 9",
   "html": "<h3>Thank you for your feedback</h3> <h4>We are glad that you love our product. Your ideas and suggestions will help us make it even better.</h4>"
  },
  {
   "expression": "{nps_score} >= 6  and {nps_score} <= 8",
   "html": "<h3>Thank you for your feedback</h3> <h4>We are glad that you shared your ideas with us. They will help us make our product better.</h4>"
  }
 ],
 "pages": [
  {
   "name": "page1",
   "elements": [
    {
     "type": "rating",
     "name": "nps_score",
     "title": "On a scale of zero to ten, how likely are you to recommend our product to a friend or colleague?",
     "isRequired": true,
     "rateCount": 11,
     "rateMin": 0,
     "rateMax": 10,
     "minRateDescription": "(Most unlikely)",
     "maxRateDescription": "(Most likely)"
    }
   ]
  },
  {
   "name": "page2",
   "elements": [
    {
     "type": "rating",
     "name": "question1",
     "title": "On a scale of zero to ten, how likely are you to recommend our product to a friend or colleague?",
     "isRequired": true,
     "rateCount": 11,
     "rateMin": 0,
     "rateMax": 10,
     "minRateDescription": "(Most unlikely)",
     "maxRateDescription": "(Most likely)"
    }
   ]
  }
 ],
 "showQuestionNumbers": "off"
}

Specify your

browser: Chromium 117.0.5938.132
editor version: 1.9.110

JaneSjs commented 11 months ago

Hi @hoolie, Thank you for reporting this issue. I reproduced it on my side. The expected behavior would be that a page is focused when a user selects a page button within a page navigator. We'll research this issue and update this thread as soon as we get any news.

https://github.com/surveyjs/survey-creator/assets/22372972/0bcdf316-2fce-4b9a-ad34-b182a03fa66e

Thanks

JaneSjs commented 11 months ago

@hoolie, I discussed this issue with the team. A page navigtor is basically designed to scroll the survey design area to a clicked element. When no scrollbar appears, a page navigator is not actually required because all pages are accessible on a screen. For us to move forward and consider the most suitable option, please elaborae on the expected behavior. What do you expect by clicking on a page1 or page 2 button?

I look forward to your reply.

hoolie commented 11 months ago

Hello @JaneSjs , Thanks for looking into this issue.

Yes, I agree that the for that scenario, the navagator should not be visible.

But if I have the container is bigger than the screen (illustrated in Variant B above), I would expect to have an navigator and that this navigator scrolls the clicked page into view:

Here, the container holding the survey-creator does not have a scrollbar, bc the page is scrollable.

surveyjs / survey-creator