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 <[email protected]>
surveyjs · Nov 20, 2023 · bb5b8a1 · bb5b8a1
1 parent c2280db
commit bb5b8a1
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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) {