Implemented getItemsColumnKey for base select question

surveyjs · Aug 13, 2024 · ff04319 · ff04319
1 parent cfc01b2
commit ff04319
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 7 deletions.
diff --git a/packages/survey-core/src/question_baseselect.ts b/packages/survey-core/src/question_baseselect.ts
@@ -1836,6 +1836,9 @@ export class QuestionSelectBase extends Question {
     }
     return columns;
   }
+  getItemsColumnKey(itemsColumn: Array<ItemValue>) {
+    return (itemsColumn || []).map(c => c.value || "").join("");
+  }
   get hasColumns() {
     return !this.isMobile &&
       (this.getCurrentColCount() > 1);

diff --git a/packages/survey-react-ui/src/imagepicker.tsx b/packages/survey-react-ui/src/imagepicker.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 import { ReactSurveyElement, SurveyElementBase, SurveyQuestionElementBase } from "./reactquestion_element";
-import { QuestionImagePickerModel, ImageItemValue, SurveyModel } from "survey-core";
+import { QuestionImagePickerModel, ImageItemValue, SurveyModel, ItemValue } from "survey-core";
 import { ReactQuestionFactory } from "./reactquestion_factory";
 import { ReactSurveyElementsWrapper } from "./reactsurveymodel";
 import { SvgIcon } from "./components/svg-icon/svg-icon";
@@ -23,7 +23,7 @@ export class SurveyQuestionImagePicker extends SurveyQuestionElementBase {
   }
 
   protected getColumns(cssClasses: any) {
-    return this.question.columns.map((column: any, ci: number) => {
+    return this.question.columns.map((column: Array<ItemValue>, ci: number) => {
       var items = column.map((item: any, ii: number) =>
         this.renderItem(
           "item" + ii,
@@ -32,7 +32,7 @@ export class SurveyQuestionImagePicker extends SurveyQuestionElementBase {
         )
       );
       return (
-        <div key={"column" + ci} className={this.question.getColumnClass()} role="presentation">
+        <div key={"column" + ci + this.question.getItemsColumnKey(column)} className={this.question.getColumnClass()} role="presentation">
           {items}
         </div>
       );

diff --git a/packages/survey-react-ui/src/reactquestion_checkbox.tsx b/packages/survey-react-ui/src/reactquestion_checkbox.tsx
@@ -73,7 +73,7 @@ export class SurveyQuestionCheckbox extends SurveyQuestionElementBase {
     );
   }
   protected getColumns(cssClasses: any) {
-    return this.question.columns.map((column: any, ci: number) => {
+    return this.question.columns.map((column: Array<ItemValue>, ci: number) => {
       var items = column.map((item: any, ii: number) =>
         this.renderItem(
           "item" + ii,
@@ -84,7 +84,7 @@ export class SurveyQuestionCheckbox extends SurveyQuestionElementBase {
         )
       );
       return (
-        <div key={"column" + ci} className={this.question.getColumnClass()} role="presentation">
+        <div key={"column" + ci + this.question.getItemsColumnKey(column)} className={this.question.getColumnClass()} role="presentation">
           {items}
         </div>
       );

diff --git a/packages/survey-react-ui/src/reactquestion_radiogroup.tsx b/packages/survey-react-ui/src/reactquestion_radiogroup.tsx
@@ -70,12 +70,12 @@ export class SurveyQuestionRadiogroup extends SurveyQuestionElementBase {
   }
   protected getColumns(cssClasses: any) {
     var value = this.getStateValue();
-    return this.question.columns.map((column: any, ci: number) => {
+    return this.question.columns.map((column: Array<ItemValue>, ci: number) => {
       var items = column.map((item: any, ii: number) =>
         this.renderItem("item" + ci + ii, item, value, cssClasses, "" + ci + ii)
       );
       return (
-        <div key={"column" + ci} className={this.question.getColumnClass()} role="presentation">
+        <div key={"column" + ci + this.question.getItemsColumnKey(column)} className={this.question.getColumnClass()} role="presentation">
           {items}
         </div>
       );