do not render list items if the popup is closed

packages/survey-angular-ui/src/components/list/list.component.html

@@ -15,7 +15,7 @@
         <div [class]="model.cssClasses.emptyContainer" [visible]="model.isEmpty">
             <div [class]="model.cssClasses.emptyText" [attr.aria-label]="model.emptyMessage || ''">{{ model.emptyMessage }}</div>
         </div>
-        <ul [class]="model.cssClasses.itemsContainer" role="listbox" [visible]="!model.isEmpty" (mousedown)="onMouseDown($event)" (keydown)="onKeyDown($event)" (mousemove)="onMouseMove($event)">
+        <ul *ngIf="model.renderElements" [class]="model.cssClasses.itemsContainer" role="listbox" [visible]="!model.isEmpty" (mousedown)="onMouseDown($event)" (keydown)="onKeyDown($event)" (mousemove)="onMouseMove($event)">
             <sv-ng-list-item *ngFor="let item of model.renderedActions; trackBy: trackItemBy" [listModel]="model" [model]="item"></sv-ng-list-item>
             <!--ko foreach: model.renderedActions -->
             <!-- ko component: { name: 'sv-list-item', params: { item: $data, model: $parent.model } } -->

packages/survey-angular-ui/src/components/list/list.component.ts

@@ -30,6 +30,9 @@ export class ListComponent extends BaseAngular implements AfterViewInit {
   onMouseMove(event: Event): void {
     this.model.onMouseMove(event);
   }
+  protected override getPropertiesToUpdateSync(): string[] {
+    return ["renderElements"];
+  }
   ngAfterViewInit(): void {
     if(!!this.listContainerElement?.nativeElement) {
       this.model.initListContainerHtmlElement(this.listContainerElement.nativeElement);

packages/survey-angular-ui/src/components/renderAs/dropdown-select/dropdown-option-item.component.ts

@@ -8,7 +8,12 @@ import { AngularComponentFactory } from "../../../component-factory";
 })
 export class DropdownOptionItemComponent extends BaseAngular {
   @Input() item: any;
-
+  protected override onModelChanged(): void {
+    if (!this.item.locText) return;
+    this.item.locText.onChanged = () => {
+      this.detectChanges();
+    };
+  }
   protected getModel() {
     return this.item;
   }

src/dropdownListModel.ts

@@ -84,6 +84,9 @@ export class DropdownListModel extends Base {
     });
     this._popupModel.cssClass = this.popupCssClasses;
     this._popupModel.onVisibilityChanged.add((_, option: { isVisible: boolean }) => {
+      if(option.isVisible) {
+        this.listModel.renderElements = true;
+      }
       if (option.isVisible && this.question.choicesLazyLoadEnabled) {
         this.listModel.actions = [];
         this.updateQuestionChoices();
@@ -134,6 +137,7 @@ export class DropdownListModel extends Base {
       };
     }
     const res = new ListModel<ItemValue>(visibleItems, _onSelectionChanged, false);
+    res.renderElements = false;
     res.areSameItemsCallback = (item1: IAction, item2: IAction): boolean => {
       return item1 === item2;
     };

src/knockout/components/list/list.html

@@ -18,11 +18,13 @@
   <div data-bind="css: model.cssClasses.emptyContainer, visible: $data.model.isEmpty">
     <div data-bind="css: model.cssClasses.emptyText, text: model.emptyMessage, attr: { 'aria-label': model.emptyMessage }"></div>
   </div>
+  <!-- ko if: $data.model.renderElements -->
   <ul role="listbox"
     data-bind="css: model.cssClasses.itemsContainer, visible: !$data.model.isEmpty, event: { mousedown: function (data, e) { e.preventDefault(); }, keydown: function(data, e) { $data.model.onKeyDown(event); return true; }, mousemove: function(data, e) { $data.model.onMouseMove(event); return true; } }">
     <!-- ko template: { foreach: model.renderedActions, afterRender: $data.afterItemRender } -->
     <!-- ko component: { name: 'sv-list-item', params: { item: $data, model: $parent.model } } -->
     <!-- /ko -->
     <!-- /ko -->
   </ul>
+  <!-- /ko -->
 </div>

src/list.ts

@@ -52,6 +52,7 @@ export class ListModel<T extends BaseAction = Action> extends ActionContainer<T>
   @property({ defaultValue: false }) hasVerticalScroller: boolean;
   @property({ defaultValue: true }) isAllDataLoaded: boolean;
   @property({ defaultValue: false }) showSearchClearButton: boolean;
+  @property({ defaultValue: true }) renderElements: boolean;
 
   public static INDENT: number = 16;
   public static MINELEMENTCOUNT: number = 10;

src/react/components/list/list.tsx

@@ -38,27 +38,34 @@ export class List extends SurveyElementBase<IListProps, any> {
     }
   }
   renderElement() {
-    const items = this.renderItems();
-    const ulStyle = { display: this.model.isEmpty ? "none" : null };
     return (
       <div className={this.model.cssClasses.root} ref={this.listContainerRef}>
         {this.searchElementContent()}
         {this.emptyContent()}
-        <ul
-          className={this.model.cssClasses.itemsContainer}
-          style={ulStyle as any}
-          role="listbox"
-          onMouseDown={(e) => {
-            e.preventDefault();
-          }}
-          onKeyDown={this.handleKeydown}
-          onMouseMove={this.handleMouseMove}
-        >
-          {items}
-        </ul>
+        {this.renderList()}
       </div>
     );
   }
+  renderList() {
+    if(!this.model.renderElements) return null;
+
+    const items = this.renderItems();
+    const ulStyle = { display: this.model.isEmpty ? "none" : null };
+
+    return (
+      <ul
+        className={this.model.cssClasses.itemsContainer}
+        style={ulStyle as any}
+        role="listbox"
+        onMouseDown={(e) => {
+          e.preventDefault();
+        }}
+        onKeyDown={this.handleKeydown}
+        onMouseMove={this.handleMouseMove}
+      >
+        {items}
+      </ul>);
+  }
   renderItems() {
     if (!this.model) {
       return null;

src/vue/components/list/list.vue

@@ -21,6 +21,7 @@
       <div v-bind:class="model.cssClasses.emptyText" :aria-label="model.emptyMessage">{{ model.emptyMessage }}</div>
     </div>
     <ul
+      v-if="model.renderElements"
       v-bind:class="model.cssClasses.itemsContainer"
       v-show="!model.isEmpty"
       role="listbox"

testCafe/helper.js

@@ -220,7 +220,7 @@ export const setOptions = ClientFunction((questionName, modValue) => {
   };
   const q = window["survey"].getQuestionByName(questionName || "car");
   mergeOptions(q, modValue);
-  window["survey"].render();
+  // window["survey"].render();
 });
 
 export const joinElementInnerText = ClientFunction((tagName, index) => {

testCafe/questions/dropdown.js

@@ -175,7 +175,10 @@ frameworks.forEach((framework) => {
       "Citroen",
     ];
     let checkIntegrity = async (t) => {
+      await t.click(questionDropdownSelect);
       await t.expect(listItems.count).eql(choices.length);
+      await t.click(questionDropdownSelect);
+
       for (let i = 0; i < choices.length; i++) {
         await t
           .click(questionDropdownSelect)
@@ -876,7 +879,7 @@ frameworks.forEach((framework) => {
 
     await t
       .expect(popupContainer.visible).notOk()
-      .expect(listItems.count).eql(27)
+      .expect(listItems.count).eql(0)
       .expect(listItems.filterVisible().count).eql(0)
 
       .pressKey("2")
@@ -950,7 +953,7 @@ frameworks.forEach((framework) => {
 
     await t
       .expect(popupContainer.visible).notOk()
-      .expect(listItems.count).eql(27)
+      .expect(listItems.count).eql(0)
       .expect(focusedItem.exists).notOk()
 
       .click(questionDropdownSelect)
@@ -1006,7 +1009,7 @@ frameworks.forEach((framework) => {
 
     await t
       .expect(popupContainer.visible).notOk()
-      .expect(listItems.count).eql(27)
+      .expect(listItems.count).eql(0)
       .expect(listItems.filterVisible().count).eql(0)
 
       .pressKey("2")
@@ -1504,4 +1507,35 @@ frameworks.forEach((framework) => {
 
       .resizeWindow(1280, 1100);
   });
+
+  test("do not render list items if the popup is closed", async (t) => {
+    const json = {
+      questions: [
+        {
+          type: "dropdown",
+          name: "car",
+          title: "What car are you driving?",
+          choices: [
+            "Ford",
+            "Vauxhall",
+            "Volkswagen",
+            "Nissan",
+            "Audi",
+            "Mercedes-Benz",
+            "BMW",
+            "Peugeot",
+            "Toyota",
+            "Citroen",
+          ],
+        },
+      ],
+    };
+    const listSelector = Selector(".sv-list");
+    await initSurvey(framework, json);
+
+    await t
+      .expect(listSelector.exists).notOk()
+      .click(questionDropdownSelect)
+      .expect(listSelector.exists).ok();
+  });
 });