Fix: tagbox doesn't remove items if value is number #273

andrewtelnov · andrewtelnov · commit 6e1c17a742b6 · 2021-09-23T17:58:03.000+03:00
diff --git a/examples/angular/index.html b/examples/angular/index.html
@@ -30,7 +30,6 @@
         type="text/css" rel="stylesheet" />
     <!-- bootstrap-datepicker -->
     <!-- jquery-ui-datepicker -->
-    <script src="https://unpkg.com/jquery"></script>
     <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
     <link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/smoothness/jquery-ui.css" type="text/css"
         rel="stylesheet" />
diff --git a/examples/jquery/index.html b/examples/jquery/index.html
@@ -19,7 +19,6 @@
         type="text/css" rel="stylesheet" />
     <!-- bootstrap-datepicker -->
     <!-- jquery-ui-datepicker -->
-    <script src="https://unpkg.com/jquery"></script>
     <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
     <link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/smoothness/jquery-ui.css" type="text/css"
         rel="stylesheet" />
diff --git a/examples/knockout/index.html b/examples/knockout/index.html
@@ -21,7 +21,6 @@
         type="text/css" rel="stylesheet" />
     <!-- bootstrap-datepicker -->
     <!-- jquery-ui-datepicker -->
-    <script src="https://unpkg.com/jquery"></script>
     <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
     <link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/smoothness/jquery-ui.css" type="text/css"
         rel="stylesheet" />
diff --git a/examples/react/index.html b/examples/react/index.html
@@ -25,7 +25,6 @@
         type="text/css" rel="stylesheet" />
     <!-- bootstrap-datepicker -->
     <!-- jquery-ui-datepicker -->
-    <script src="https://unpkg.com/jquery"></script>
     <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
     <link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/smoothness/jquery-ui.css" type="text/css"
         rel="stylesheet" />
diff --git a/examples/vue/index.html b/examples/vue/index.html
@@ -21,7 +21,6 @@
         type="text/css" rel="stylesheet" />
     <!-- bootstrap-datepicker -->
     <!-- jquery-ui-datepicker -->
-    <script src="https://unpkg.com/jquery"></script>
     <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
     <link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/smoothness/jquery-ui.css" type="text/css"
         rel="stylesheet" />
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -8,7 +8,8 @@
     "build": "webpack --env.buildType prod",
     "release": "standard-version --message \"Release: %s [skip ci]\"",
     "testcafe": "concurrently \"http-server --silent\" \"testcafe -c 4 chrome testcafe/ --selector-timeout 1500\"",
-    "testcafe:ci": "http-server --silent & testcafe chrome:headless testcafe/ --selector-timeout 1500 "
+    "testcafe:ci": "http-server --silent & testcafe chrome:headless testcafe/ --selector-timeout 1500 ",
+    "testcafe_file": "concurrently \"http-server --silent\" \"testcafe chrome testCafe/tagbox.ts --selector-timeout 1500 --reporter minimal\""    
   },
   "repository": {
     "type": "git",
@@ -45,4 +46,4 @@
     "virtual-module-webpack-plugin": "^0.3.0",
     "webpack": "^3.6.0"
   }
-}
+}
diff --git a/src/select2-tagbox.js b/src/select2-tagbox.js
@@ -158,13 +158,20 @@ function init(Survey, $) {
         updateComment();
       });
       $el.on("select2:unselect", function (e) {
-        var index = (question.value || []).indexOf(e.params.data.id);
-        if (isAllItemSelected(e.params.data.id)) {
+        const select2Val = e.params.data.id;
+        if (isAllItemSelected(select2Val)) {
           question.clearValue();
-        } else if (index !== -1) {
-          var val = [].concat(question.value);
-          val.splice(index, 1);
-          question.value = val;
+        } else {        
+          const val = [].concat(question.value);
+          if(Array.isArray(val)) {
+            for(var i = 0; i < val.length; i ++) {
+              if(val[i] == select2Val || (!!val[i] && val[i].toString() == select2Val)) {
+                val.splice(i, 1);
+                question.value = val;
+                break;
+              }
+            }
+          }
         }
         updateComment();
       });
diff --git a/testcafe/all-widgets.ts b/testcafe/all-widgets.ts
@@ -17,7 +17,7 @@ var json = {
         {
             type: "dropdown",
             renderAs: "select2",
-            choicesByUrl: { url: "https://restcountries.eu/rest/v1/all" },
+            choicesByUrl: { url: "https://surveyjs.io/api/CountriesExample" },
             name: "countries",
         },
         {
diff --git a/testcafe/helper.js b/testcafe/helper.js
@@ -57,4 +57,7 @@ export const initSurvey = ClientFunction(
     window.survey = model;
   }
 );
+export const getData = ClientFunction(() => {
+  return survey.data;
+});
 
diff --git a/testcafe/tagbox.ts b/testcafe/tagbox.ts
@@ -0,0 +1,50 @@
+import { Selector, ClientFunction } from "testcafe";
+import { url, initSurvey, frameworks, getData } from "./helper";
+const assert = require("assert");
+
+const title = "Tagbox widget";
+
+const explicitErrorHandler = () => {
+    window.addEventListener("error", e => {
+        if (e.message === "ResizeObserver loop completed with undelivered notifications." ||
+            e.message === "ResizeObserver loop limit exceeded") {
+            e.stopImmediatePropagation();
+        }
+    });
+};
+
+var json = {
+    questions: [
+        {
+            type: 'tagbox',
+            name: 'question1',
+            choices: [
+                { value: 1, text: 'Item 1' },
+                { value: 2, text: 'Item 2' },
+                { value: 3, text: 'Item 3' },
+                { value: 4, text: 'Item 4' },
+                { value: 5, text: 'Item 5' },
+            ]
+        }
+    ]
+};
+
+frameworks.forEach(async framework => {
+    fixture`${framework} ${title}`.page`${url}${framework}`.clientScripts({ content: `(${explicitErrorHandler.toString()})()` }).beforeEach(async t => {
+    });
+
+    test("Check all widgets are visible", async t => {
+        await initSurvey(framework, json);
+        //await t.debug()
+        await t
+            .expect(Selector("h5[aria-label='question1']").exists).ok()
+            .click(Selector(".select2-container"))
+            .typeText(".select2-container", "Item 1")
+            .pressKey("enter")
+            .typeText(".select2-container", "Item 3")
+            .pressKey("enter")
+            .click(Selector(".select2-selection__choice__remove").nth(0));
+        let data = await getData();
+        assert.deepEqual(data["question1"], [3]);
+    });
+});

Original file line number	Diff line number	Diff line change
`@@ -17,7 +17,7 @@ var json = {`
`17`	`17`	`{`
`18`	`18`	`type: "dropdown",`
`19`	`19`	`renderAs: "select2",`
`20`		`- choicesByUrl: { url: "https://restcountries.eu/rest/v1/all" },`
	`20`	`+ choicesByUrl: { url: "https://surveyjs.io/api/CountriesExample" },`
`21`	`21`	`name: "countries",`
`22`	`22`	`},`
`23`	`23`	`{`
Original file line number	Diff line number	Diff line change
`@@ -57,4 +57,7 @@ export const initSurvey = ClientFunction(`
`57`	`57`	`window.survey = model;`
`58`	`58`	`}`
`59`	`59`	`);`
	`60`	`+export const getData = ClientFunction(() => {`
	`61`	`+ return survey.data;`
	`62`	`+});`
`60`	`63`