From bb5b8a1e1a69ea63c4a90ace05048adc67829005 Mon Sep 17 00:00:00 2001
From: OlgaLarina <olga.larina.developer@gmail.com>
Date: Mon, 20 Nov 2023 19:16:57 +0300
Subject: [PATCH] tagbox choices by url with default values (#7381)

* work for #7362 TagBox - Default values are not displayed and Tag Box becomes unresponsive

* work for #7362 [jQuery] TagBox - Default values are not displayed and Tag Box becomes unresponsive

* work for #7362 fix vue

---------

Co-authored-by: OlgaLarina <olga.larina.dev@gmail.com>
---
 src/question_checkbox.ts             |  9 ++++++---
 src/vue/components/tagbox/tagbox.vue |  5 ++++-
 testCafe/questions/tagbox.ts         | 30 ++++++++++++++++++++++++++++
 3 files changed, 40 insertions(+), 4 deletions(-)

diff --git a/src/question_checkbox.ts b/src/question_checkbox.ts
index ea3eaabfab..7c5a86c75e 100644
--- a/src/question_checkbox.ts
+++ b/src/question_checkbox.ts
@@ -206,12 +206,15 @@ export class QuestionCheckboxModel extends QuestionCheckboxBase {
    * @see enabledChoices
    */
   public get selectedChoices(): Array<ItemValue> {
+    const val = this.renderedValue as Array<any>;
+    const visChoices = this.visibleChoices;
+    const selectedItemValues = this.selectedItemValues;
+
     if (this.isEmpty()) return [];
 
-    const val = this.renderedValue as Array<any>;
-    const allChoices = !!this.defaultSelectedItemValues ? [].concat(this.defaultSelectedItemValues, this.visibleChoices) : this.visibleChoices;
+    const allChoices = !!this.defaultSelectedItemValues ? [].concat(this.defaultSelectedItemValues, visChoices) : visChoices;
     const itemValues = val.map((item) => { return ItemValue.getItemByValue(allChoices, item); }).filter(item => !!item);
-    if(!itemValues.length && !this.selectedItemValues) {
+    if(!itemValues.length && !selectedItemValues) {
       this.updateSelectedItemValues();
     }
 
diff --git a/src/vue/components/tagbox/tagbox.vue b/src/vue/components/tagbox/tagbox.vue
index e40647ca06..74448864a9 100644
--- a/src/vue/components/tagbox/tagbox.vue
+++ b/src/vue/components/tagbox/tagbox.vue
@@ -21,7 +21,7 @@
     >
       <div :class="question.cssClasses.controlValue">
         <sv-tagbox-item
-          v-for="(item, index) in question.selectedChoices"
+          v-for="(item, index) in selectedChoices"
           :item="item"
           :question="question"
           :key="'item' + index"
@@ -76,6 +76,9 @@ export class TagboxComponent extends BaseVue {
   get model() {
     return this.question.dropdownListModel;
   }
+  get selectedChoices() {
+    return this.question.selectedChoices;
+  }
   getModel() {
     return this.model;
   }
diff --git a/testCafe/questions/tagbox.ts b/testCafe/questions/tagbox.ts
index 31d5bf1cae..d01107d2f9 100644
--- a/testCafe/questions/tagbox.ts
+++ b/testCafe/questions/tagbox.ts
@@ -476,6 +476,36 @@ frameworks.forEach((framework) => {
       .expect(selectedItems.count).eql(0);
   });
 
+  test("Check default value", async (t) => {
+    await initSurvey(framework, {
+      "elements": [
+        {
+          "type": "tagbox",
+          "isRequired": true,
+          "choicesByUrl": {
+            "url": "http://127.0.0.1:8080/testCafe/countriesMock.json",
+            path: "RestResponse;result",
+            valueName: "name"
+          },
+          "name": "countries",
+          "defaultValue": ["Cuba", "Romania"],
+        }
+      ],
+    });
+    await t
+      .expect(selectedItems.count).eql(2)
+      .expect(selectedItems.nth(0).textContent).contains("Cuba")
+      .expect(selectedItems.nth(1).textContent).contains("Romania")
+
+      .click(questionTagbox)
+      .click(getListItemByText("United States"))
+      .pressKey("esc")
+      .expect(selectedItems.count).eql(3)
+      .expect(selectedItems.nth(0).textContent).contains("Cuba")
+      .expect(selectedItems.nth(1).textContent).contains("Romania")
+      .expect(selectedItems.nth(2).textContent).contains("United States");
+  });
+
   const theme = "defaultV2";
 
   function choicesLazyLoad(_, opt) {