MaxSelectedChoices stop updating Disabled class for selectbase (probl… (

#8163) * MaxSelectedChoices stop updating Disabled class for selectbase (problem with v1.9.139) fix #8159 * Peform optimization #8159
surveyjs · Apr 23, 2024 · eeb55f2 · eeb55f2
1 parent fe02eca
commit eeb55f2
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 7 deletions.
diff --git a/src/question_baseselect.ts b/src/question_baseselect.ts
@@ -1713,18 +1713,20 @@ export class QuestionSelectBase extends Question {
       .append("sv-q-col-" + this.getCurrentColCount(), !this.hasColumns && this.colCount !== 0)
       .append(this.cssClasses.itemOnError, this.hasCssError());
 
-    const isDisabled = this.isReadOnly || !item.isEnabled;
+    const readOnlyStyles = this.getIsDisableAndReadOnlyStyles(!item.isEnabled);
+    const isReadOnly = readOnlyStyles[0];
+    const isDisabled = readOnlyStyles[1];
     const isChecked = this.isItemSelected(item) ||
       (this.isOtherSelected && this.otherItem.value === item.value);
     const allowHover = !isDisabled && !isChecked && !(!!this.survey && this.survey.isDesignMode);
     const isNone = item === this.noneItem;
-    options.isDisabled = isDisabled;
+    options.isDisabled = isDisabled || isReadOnly;
     options.isChecked = isChecked;
     options.isNone = isNone;
 
     return builder
-      .append(this.cssClasses.itemDisabled, this.isDisabledStyle)
-      .append(this.cssClasses.itemReadOnly, this.isReadOnlyStyle)
+      .append(this.cssClasses.itemDisabled, isDisabled)
+      .append(this.cssClasses.itemReadOnly, isReadOnly)
       .append(this.cssClasses.itemPreview, this.isPreviewStyle)
       .append(this.cssClasses.itemChecked, isChecked)
       .append(this.cssClasses.itemHover, allowHover)

diff --git a/src/survey-element.ts b/src/survey-element.ts
@@ -1019,10 +1019,17 @@ export class SurveyElement<E = any> extends SurveyElementCore implements ISurvey
       .append(cssClasses.titleOnError, this.containsErrors).toString();
   }
   public get isDisabledStyle(): boolean {
-    return !this.isDefaultV2Theme && (this.isReadOnlyStyle || this.isPreviewStyle);
+    return this.getIsDisableAndReadOnlyStyles(false)[1];
   }
   public get isReadOnlyStyle(): boolean {
-    return this.isReadOnly && !this.isPreviewStyle;
+    return this.getIsDisableAndReadOnlyStyles(false)[0];
+  }
+  protected getIsDisableAndReadOnlyStyles(itemReadOnly: boolean): Array<boolean> {
+    const isPreview = this.isPreviewStyle;
+    const isReadOnly = itemReadOnly || this.isReadOnly;
+    const isReadOnlyStyle = isReadOnly && !isPreview;
+    const isDisableStyle = !this.isDefaultV2Theme && (isReadOnly || isPreview);
+    return [isReadOnlyStyle, isDisableStyle];
   }
   public get isPreviewStyle(): boolean {
     return !!this.survey && this.survey.state === "preview";

diff --git a/tests/question_baseselecttests.ts b/tests/question_baseselecttests.ts
@@ -1915,4 +1915,33 @@ QUnit.test("On value changed, comment and valueName Bug#8137", (assert) => {
   assert.equal(questionName, "q1", "question name #3");
   assert.equal(name, "val1-Comment", "name #3");
   assert.equal(value, "comment1", "value #3");
-});
+});
+QUnit.test("maxSelectedChoices & getItemClass, bug#8159", (assert) => {
+  var json = {
+    questions: [
+      {
+        type: "checkbox",
+        name: "q1",
+        choices: ["Item1", "Item2", "Item3"],
+        maxSelectedChoices: 2
+      },
+    ],
+  };
+  const survey = new SurveyModel(json);
+  const q1 = <QuestionSelectBase>survey.getQuestionByName("q1");
+  const disableStyle = "sv_q_disable";
+  const readOnlyStyle = "sv_q_disable";
+  q1.cssClasses.itemDisabled = disableStyle;
+  q1.cssClasses.itemReadOnly = readOnlyStyle;
+  q1.renderedValue = ["Item1", "Item3"];
+  assert.ok(q1.visibleChoices[0].enabled, "Item1 enabled #1");
+  assert.notOk(q1.visibleChoices[1].enabled, "Item2 enabled #2");
+
+  assert.notOk(q1.getItemClass(q1.visibleChoices[0]).indexOf(disableStyle) >= 0, "Item1 disabled #1");
+  assert.ok(q1.getItemClass(q1.visibleChoices[1]).indexOf(disableStyle) >= 0, "Item2 disabled #2");
+  assert.notOk(q1.getItemClass(q1.visibleChoices[2]).indexOf(disableStyle) >= 0, "Item3 disabled #3");
+
+  assert.notOk(q1.getItemClass(q1.visibleChoices[0]).indexOf(readOnlyStyle) >= 0, "Item1 read-only #1");
+  assert.ok(q1.getItemClass(q1.visibleChoices[1]).indexOf(readOnlyStyle) >= 0, "Item2 read-only #2");
+  assert.notOk(q1.getItemClass(q1.visibleChoices[2]).indexOf(readOnlyStyle) >= 0, "Item3 read-only #3");
+});