Bug/6865 knockout showinmultiplecolumns maxselchoices (#6901)

* Refactor code and write functional test #6865 * Fix the issue #6865
surveyjs · Sep 8, 2023 · b922057 · b922057
1 parent 51f7770
commit b922057
Show file tree

Hide file tree

Showing 7 changed files with 54 additions and 19 deletions.
diff --git a/src/knockout/kosurvey.ts b/src/knockout/kosurvey.ts
@@ -171,7 +171,7 @@ LocalizableString.prototype["onCreating"] = function () {
 };
 
 ItemValue.prototype["onCreating"] = function () {
-  // new ImplementorBase(this);
+  new ImplementorBase(this);
   this.koText = ko.pureComputed(() => { return this.locText.koRenderedHtml(); });
 };
 

diff --git a/src/knockout/templates/question-checkbox.html b/src/knockout/templates/question-checkbox.html
@@ -47,13 +47,13 @@
     </fieldset>
 </script>
 <script type="text/html" id="survey-checkbox-item">
-  <div role="presentation" data-bind="css: question.getItemClass(item)">
-      <label data-bind="css: question.getLabelClass(item), attr: { 'aria-label': question.getAriaItemLabel(item) }">
-          <!-- ko if: item == question.selectAllItem -->
-          <input role="option" type="checkbox" value="" data-bind="attr: {name: question.name, id: question.getItemId(item), 'aria-describedby': question.ariaDescribedBy }, checked: question.koAllSelected, enable: question.getItemEnabled(item), css: question.cssClasses.itemControl"/>
+  <div role="presentation" data-bind="css: question.getItemClass($data)">
+      <label data-bind="css: question.getLabelClass($data), attr: { 'aria-label': question.getAriaItemLabel($data) }">
+          <!-- ko if: $data == question.selectAllItem -->
+          <input role="option" type="checkbox" value="" data-bind="attr: {name: question.name, id: question.getItemId($data), 'aria-describedby': question.ariaDescribedBy }, checked: question.koAllSelected, enable: question.getItemEnabled($data), css: question.cssClasses.itemControl"/>
           <!-- /ko -->
-          <!-- ko if: item != question.selectAllItem -->
-          <input role="option" type="checkbox" data-bind="attr: {name: question.name, id: question.getItemId(item), 'aria-describedby': question.ariaDescribedBy }, checkedValue: item.value, checked: question.koValue, enable: question.getItemEnabled(item), css: question.cssClasses.itemControl"/>
+          <!-- ko if: $data != question.selectAllItem -->
+          <input role="option" type="checkbox" data-bind="attr: {name: question.name, id: question.getItemId($data), 'aria-describedby': question.ariaDescribedBy }, checkedValue: $data.value, checked: question.koValue, enable: question.getItemEnabled($data), css: question.cssClasses.itemControl"/>
           <!-- /ko -->
               <!-- ko if: question.cssClasses.materialDecorator -->
               <span data-bind="css: question.cssClasses.materialDecorator">
@@ -64,9 +64,9 @@
                 <!-- /ko -->
               </span>
               <!-- /ko -->
-          <!-- ko if: !item.hideCaption -->
+          <!-- ko if: !$data.hideCaption -->
           <span data-bind="css: question.cssClasses.controlLabel">
-          <!-- ko template: { name: 'survey-string', data: item.locText } -->
+          <!-- ko template: { name: 'survey-string', data: $data.locText } -->
           <!-- /ko -->
           </span>
           <!-- /ko -->

diff --git a/src/knockout/templates/question-matrixdynamic.html b/src/knockout/templates/question-matrixdynamic.html
@@ -54,13 +54,13 @@
       <!-- /ko -->
       <!-- ko if: $data.isCheckbox -->
         <!-- ko let: { question: $data.matrix.getCellTemplateData($data) } -->
-          <!-- ko component: { name: $data.matrix.getCellWrapperComponentName($data), params: { componentData:  $data.matrix.getCellWrapperComponentData($data), templateData: { name:  'survey-checkbox-item', data: { item: item, hideCaption: true } } } } -->
+          <!-- ko component: { name: $data.matrix.getCellWrapperComponentName($data), params: { componentData:  $data.matrix.getCellWrapperComponentData($data), templateData: { name:  'survey-checkbox-item', data: item } } } -->
           <!-- /ko -->
         <!-- /ko -->
       <!-- /ko -->
       <!-- ko if: $data.isRadio -->
         <!-- ko let: { question: $data.matrix.getCellTemplateData($data) } -->
-          <!-- ko component: { name: $data.matrix.getCellWrapperComponentName($data), params: { componentData:  $data.matrix.getCellWrapperComponentData($data), templateData: { name:  'survey-radiogroup-item', data: { item: item, hideCaption: true } } } } -->
+          <!-- ko component: { name: $data.matrix.getCellWrapperComponentName($data), params: { componentData:  $data.matrix.getCellWrapperComponentData($data), templateData: { name:  'survey-radiogroup-item', data: item } } } -->
           <!-- /ko -->  
         <!-- /ko -->   
       <!-- /ko -->

diff --git a/src/knockout/templates/question-radiogroup.html b/src/knockout/templates/question-radiogroup.html
@@ -51,11 +51,11 @@
   </fieldset>
 </script>
 <script type="text/html" id="survey-radiogroup-item">
-  <div role="presentation" data-bind="css: question.getItemClass(item)">
-    <label data-bind="css: question.getLabelClass(item), attr: { 'aria-label': question.getAriaItemLabel(item) }, event: { mousedown: question.koMouseDown }">
+  <div role="presentation" data-bind="css: question.getItemClass($data)">
+    <label data-bind="css: question.getLabelClass($data), attr: { 'aria-label': question.getAriaItemLabel($data) }, event: { mousedown: question.koMouseDown }">
       <input
         type="radio"
-        data-bind="attr: { name: question.questionName, id: question.getItemId(item), 'aria-describedby': question.ariaDescribedBy }, checkedValue: item.value, checked: question.renderedValue, enable: question.getItemEnabled(item), css: question.cssClasses.itemControl"
+        data-bind="attr: { name: question.questionName, id: question.getItemId($data), 'aria-describedby': question.ariaDescribedBy }, checkedValue: $data.value, checked: question.renderedValue, enable: question.getItemEnabled($data), css: question.cssClasses.itemControl"
       />
       <!-- ko if: question.cssClasses.materialDecorator -->
       <span data-bind="css: question.cssClasses.materialDecorator">
@@ -66,9 +66,9 @@
         <!-- /ko -->
       </span>
       <!-- /ko -->
-      <!-- ko if: !item.hideCaption -->
-      <span data-bind="css: question.getControlLabelClass(item)">
-        <!-- ko template: { name: 'survey-string', data: item.locText } -->
+      <!-- ko if: !$data.hideCaption -->
+      <span data-bind="css: question.getControlLabelClass($data)">
+        <!-- ko template: { name: 'survey-string', data: $data.locText } -->
         <!-- /ko -->
       </span>
       <!-- /ko -->

diff --git a/src/question_checkbox.ts b/src/question_checkbox.ts
@@ -237,7 +237,7 @@ export class QuestionCheckboxModel extends QuestionCheckboxBase {
     }
 
     const val = this.renderedValue as Array<any>;
-    return val.map((item: any) => new ItemValue(item));
+    return val.map((item: any) => this.createItemValue(item));
   }
 
   protected onCheckForErrors(

diff --git a/src/question_dropdown.ts b/src/question_dropdown.ts
@@ -117,7 +117,7 @@ export class QuestionDropdownModel extends QuestionSelectBase {
         i <= this.choicesMax;
         i += this.choicesStep
       ) {
-        this.minMaxChoices.push(new ItemValue(i));
+        this.minMaxChoices.push(this.createItemValue(i));
       }
     }
     res = res.concat(this.minMaxChoices);

diff --git a/testCafe/questions/checkboxes.js b/testCafe/questions/checkboxes.js
@@ -462,3 +462,38 @@ frameworks.forEach((framework) => {
     await t.expect(surveyResult.car).eql(["Nissan", "BMW"]);
   });
 });
+frameworks.forEach((framework) => {
+  fixture`${framework} ${title}`.page`${url}${framework}`.beforeEach(async t => {
+    await t.resizeWindow(800, 600);
+  });
+  test("maxSelectedChoices in matrix with showInMultipleColumns", async (t) => {
+    await initSurvey(framework, {
+      "elements": [
+        {
+          "type": "matrixdropdown",
+          "name": "q1",
+          "columns": [
+            {
+              "name": "col1",
+              "cellType": "checkbox",
+              "showInMultipleColumns": true,
+              "choices": ["a", "b", "c", "d", "e"],
+              "maxSelectedChoices": 2
+            }
+          ],
+          "rows": ["row1"]
+        }
+      ]
+    });
+    const checks = Selector("input[type='checkbox'");
+    await t
+      .click(checks.nth(0))
+      .click(checks.nth(1))
+      .click(checks.nth(2))
+      .click(checks.nth(3))
+      .click(checks.nth(4))
+      .click("input[value=Complete]");
+    const surveyResult = await getSurveyResult();
+    await t.expect(surveyResult.q1.row1.col1).eql(["a", "b"]);
+  });
+});