Dropdown - A dropdown remains open

[Giusort]

Hi,

using survey-angular-ui:

"survey-angular-ui": "^1.9.106",
"survey-core": "^1.9.106",
"surveyjs-widgets": "^1.9.106",

we have exactly the same issue as in #6444 and in this demo.

Thank you

[JaneSjs]

Hi @Giusort, I created the following demo using the survey-angular-ui package v1.9.106: View Demo.

I can confirm that a drop-down is correctly collapsed when scrolling a form. Would you please test the demo on your side and let me know if it works for you?

[Giusort]

Thank you @JaneSjs,

thanks to your demo we explored the question in depth:

if in our project we use a popup

"<popup-survey [model]="surveyModel" [isExpanded]="true">"

the behavior is as expected, the drop down closes on the external scroll but if we use just the survey the dropdown remains open

"<survey [model]="surveyModel">"

We noticed that in the survey-angular-ui documentation there is the same wrong behavior:

https://surveyjs.io/form-library/examples/create-dropdown-menu-in-javascript/angular#

but it's ok in the example sandbox:

https://codesandbox.io/s/whvhgc

This is our configuration:

Angular CLI: 15.2.9 Node: 18.10.0 Package Manager: npm 9.8.0 OS: win32 x64

Angular: 15.2.9 ... animations, cdk, cli, common, compiler, compiler-cli, core ... elements, forms, language-service, platform-browser ... platform-browser-dynamic, router

Package Version

@angular-devkit/architect 0.1502.9 @angular-devkit/build-angular 15.2.9 @angular-devkit/core 15.2.9 @angular-devkit/schematics 15.2.9 @schematics/angular 15.2.9 ng-packagr 15.2.2 rxjs 6.6.7 typescript 4.9.5

[JaneSjs]

Hello @Giusort, Thank you for the quick update. I reproduced this issue on our Dropdown demo. https://github.com/surveyjs/survey-library/assets/22372972/d83e086e-eb68-4400-9dc8-94eb17cd2914

We'll research this issue and update you once we have any news to share.

Thank you

[JaneSjs]

Hello @Giusort, I quickly discussed this issue with our developers. It appears that a Dropdown doesn't close a popup because in the prodivded HTML configuration, it doesn't track a parent container scrolling. To resolve the issue, it is necessary to enable the survey.fitToContainer option.

{
  "fitToContainer":  true,
  "elements": [
    {
      "type": "dropdown",
      "name": "car",
      "title": "Which is the brand of your car?",
      "isRequired": true,
      "showNoneItem": true,
      "showOtherItem": true,
      "choices": [ "Ford", "Vauxhall", "Volkswagen", "Nissan", "Audi", "Mercedes-Benz", "BMW", "Peugeot", "Toyota", "Citroen" ]
    }
  ],
  "showQuestionNumbers": false
}

We'll continue investigating this issue. Thank you

[Giusort]

Thank you @JaneSjs,

we tryed to add the "fitToContainer" option without success so we did further investigation and found that the problem is related to the vertical scrollbar.

If the dropdown is inside a scrollable page contained in a scrollable frame, it closes only if the scroll occurs in the outermost page and not in the one where the dropdown is placed.

In the below image, if you scroll in the red point area the dropdown closes, if you scroll in the green point area, the frame scrolls but the dropdown remains open.

To show you this issue we updated your example on CodeSandbox adding a vertical scrollbar:

https://codesandbox.io/s/surveyjs-angular-forked-p5zh7p?file=/src/app/components/survey.component.html

[JaneSjs]

Hello @Giusort, Thank you for sharing a demo. I enabled the fitToContainer option within your demo and confirmed it works as expected. Please test the updated sample: https://codesandbox.io/s/surveyjs-angular-forked-9mggty?file=/src/app/components/json.ts.

https://github.com/surveyjs/survey-library/assets/22372972/691028c4-3183-4b38-bf32-4c4a16ab67ed

Let me know if it woks.

[Giusort]

Hi @JaneSjs, thank you.

I updated your last working example (with the fitToContainer option) adding a div with a vertical scroller:

https://codesandbox.io/s/surveyjs-angular-forked-tcfx5f?file=/src/app/components/survey.component.html

As you can see, if you open the dropdown and scroll on the "Lorem ipsum" frame, the drop down still remains open; if you scroll where the dropdown is, it closes (without "fitToContainer: true" the dropdown remains always open, regardless of where you scroll).

[JaneSjs]

Hello @Giusort, Please accept my apologies for the delayed reply. Thank you for the update. I'll discuss this issue with our developers and update you shortly.

https://github.com/surveyjs/survey-library/assets/22372972/3c383f6c-c582-4e68-ae5b-159dd657eafc

[JaneSjs]

Hello @Giusort, I discussed this issue with our developers. It appears that we do detect scroll events of outer survey containers and do not forcibly close a popup.

To close a survey popup when the outer container is being scrolled, handle all scroll events and programmatically hide a popup.

• Subscribe to the survey.onPopupVisibleChanged event to access a popup instance.

• Subscribe to the onScroll event and enable the useCapture option. With this option, the onScroll event will fire on all elements within a page.

  export class SurveyComponent implements OnInit {
  model: Model;
  popup;
  
  ngOnInit() {
  const survey = new Model(json);
  
  survey.onPopupVisibleChanged.add((sender, options) => {
    this.popup = options.popup;
  });
  window.addEventListener(
    "scroll",
    () => {
      if (this.popup) {
        this.popup.isVisible = false;
      }
    },
    true
  );
  ...
  this.model = survey;
  }
  }

  View Demo

Should you have any further question, please feel free to reactivate this thread.

[Giusort]

Thank you @JaneSjs!