Question T9234
Visible to All Users

Opening and closing a modal auto scrolls the page

created 3 years ago

Hi, I've got an example of a similar scenario that I have implemented in my application. In short, I've added a button on the creator toolbar items to open a modal. This modal doesn't contain anything but a close icon (to demonstrate the issue I'm faced with). The problem is that when this modal is opened and closed, the creator page auto scrolls. The more you scroll in the creator page and then open the modal, the more the page will then auto scroll.

For example, to replicate this issue:

  1. Load the creator page
  2. Open and close the modal; this doesn't cause any auto scrolling on the survey creator page
  3. Scroll a little bit on the survey creator page
  4. Open and close the modal again
  5. Notice that when you close the modal, the page has auto scrolled

I've created a code sandbox to demonstrate the issue: https://codesandbox.io/s/peaceful-neumann-2brmgu?file=/src/SurveyCreatorComponent.jsx

I'm not sure if this behavior is to do with Survey Creator or something else, but would you have an idea as to why this is occurring?

Show previous comments (1)

    Hi Olga, could you scroll down the page a bit more? For example, could you scroll down to "page 2" and then try to open and close the modal? I think you should see the same behavior at that point. Like I mentioned, the problem occurs the more you scroll down the page.

      Perhaps this behavior is related to the Dialog component, I can suggest using our pop-up dialog as a workaround. Take a look at this example.

        Thanks for the example. I have two subsequent questions:

        1. Are you able to investigate why the Dialog component has this effect on the Survey Creator? I have implemented Dialog on other pages of my application and I don't see the same behavior.
        2. Do you have further documentation on your pop-up dialog? For example, how to customise it further? I see that you have popupModel.title = "Title"; in the example, but what else are we able to do with it?

        Answers approved by surveyjs Support

        created 3 years ago
        1. By opening/closing the dialog box, you update the state of the SurveyCreatorComponent (setModalOpen(false)), which triggers re-rendering, the SurveyCreator instance is re-created, the questions are rendered lazily, so scrolling turns out to be in different place of survey that looks like design survey content jumps. You can check the updated example, where creator doesn't jump.

        2. Unfortunately, there is no documentation for this class yet, but we are actively working on it. If you will use this class, we will help you with it.

          Comments (1)

            Thank you Olga for the updated example. With regards to the pop up modal class, I'll see if this can be incorporated in my application and will come to you for help if I need it. Thank you again.