work for the #8209

surveyjs · Jun 3, 2024 · 0701682 · 0701682
1 parent fde4229
commit 0701682
Show file tree

Hide file tree

Showing 6 changed files with 75 additions and 4 deletions.
diff --git a/packages/survey-angular-ui/src/questions/imagepicker-item.component.ts b/packages/survey-angular-ui/src/questions/imagepicker-item.component.ts
@@ -14,6 +14,7 @@ export class ImagePickerItemComponent extends BaseAngular<ImageItemValue> implem
     return this.model;
   }
   onChange(event: any) {
+    if (this.question.isReadOnlyAttr) return;
     if (this.question.multiSelect) {
       if (event.target.checked) {
         this.question.value = this.question.value.concat(event.target.value);

diff --git a/packages/survey-vue3-ui/src/ImagepickerItem.vue b/packages/survey-vue3-ui/src/ImagepickerItem.vue
@@ -7,7 +7,7 @@
         :name="question.questionName"
         :value="item.value"
         :id="question.getItemId(item)"
-        v-model="question.value"
+        v-model="value"
         :disabled="!question.getItemEnabled(item)"
         :readonly="question.isReadOnlyAttr"
         v-bind:aria-required="question.ariaRequired"
@@ -22,7 +22,7 @@
         :name="question.questionName"
         :value="item.value"
         :id="question.getItemId(item)"
-        v-model="question.value"
+        v-model="value"
         :disabled="!question.getItemEnabled(item)"
         :readonly="question.isReadOnlyAttr"
         v-bind:aria-required="question.ariaRequired"
@@ -116,6 +116,7 @@
 <script lang="ts" setup>
 import type { ImageItemValue, QuestionImagePickerModel } from "survey-core";
 import { useBase, useLocString } from "./base";
+import { computed } from "vue";
 defineOptions({ inheritAttrs: false });
 const props = defineProps<{
   question: QuestionImagePickerModel;
@@ -124,6 +125,16 @@ const props = defineProps<{
 const getItemClass = (item: any) => {
   return props.question.getItemClass(item);
 };
+const value = computed({
+  get() {
+    return props.question.value;
+  },
+  set(value) {
+    const question = props.question;
+    if (question.isReadOnlyAttr) return;
+    question.value = value;
+  },
+});
 useBase(() => props.item);
 const imageLink = useLocString(() => props.item.locImageLink);
 </script>
diff --git a/src/question_rating.ts b/src/question_rating.ts
@@ -610,6 +610,7 @@ export class QuestionRatingModel extends Question {
     return !isNaN(val) ? parseFloat(val) : val;
   }
   public setValueFromClick(value: any) {
+    if (this.isReadOnlyAttr) return;
     if (this.value === parseFloat(value)) {
       this.clearValue(true);
     } else {
@@ -831,7 +832,6 @@ export class QuestionRatingModel extends Question {
     return false;
   }
   public get renderedValue(): any {
-    if (this.isReadOnlyAttr) return;
     return this.value;
   }
   public set renderedValue(val: any) {

diff --git a/testCafe/questions/imagepicker.js b/testCafe/questions/imagepicker.js
@@ -1,5 +1,5 @@
 import { ClientFunction, fixture, Selector, test } from "testcafe";
-import { frameworks, url, initSurvey, getSurveyResult, getQuestionValue, getQuestionJson, checkSurveyWithEmptyQuestion } from "../helper";
+import { frameworks, url, initSurvey, getSurveyResult, getQuestionValue, getQuestionJson, checkSurveyWithEmptyQuestion, urlV2, applyTheme } from "../helper";
 // eslint-disable-next-line no-undef
 const assert = require("assert");
 const title = "imagepicker";
@@ -103,4 +103,45 @@ frameworks.forEach((framework) => {
     json = JSON.parse(await getQuestionJson());
     assert.equal(json.title, newTitle);
   });
+});
+
+frameworks.forEach((framework) => {
+  fixture`${framework} ${title}`.page`${urlV2}${framework}`.beforeEach(
+    async (ctx) => {
+      const json = {
+        questions: [
+          {
+            "type": "imagepicker",
+            "name": "imagepicker",
+            "titleLocation": "hidden",
+            "choices": [
+              {
+                "value": "lion",
+                "imageLink": "https://surveyjs.io/Content/Images/examples/image-picker/lion.jpg",
+                "text": "Lion"
+              },
+              {
+                "value": "giraffe",
+                "imageLink": "https://surveyjs.io/Content/Images/examples/image-picker/giraffe.jpg",
+                "text": "Giraffe"
+              }
+            ],
+            "readOnly": true,
+            "defaultValue": "lion"
+          }
+        ]
+      };
+      await applyTheme("defaultV2");
+      await initSurvey(framework, json);
+    }
+  );
+
+  test("readonly:keyboard disabled", async (t) => {
+    await t.pressKey("tab").pressKey("right");
+    const getValue = ClientFunction(()=>{
+      return window["survey"].getAllQuestions()[0].value;
+    });
+    const value = await getValue();
+    await t.expect(value).eql("lion", "value doesn't change");
+  });
 });
diff --git a/testCafe/questions/radiogroup.js b/testCafe/questions/radiogroup.js
@@ -587,4 +587,13 @@ frameworks.forEach((framework) => {
     await t.expect(input.checked).eql(false);
     await t.expect(Selector("input[value=BMW]").checked).eql(true);
   });
+
+  test("readonly:keyboard disabled", async (t) => {
+    await t.pressKey("tab").pressKey("down");
+    const getValue = ClientFunction(()=>{
+      return window["survey"].getAllQuestions()[0].value;
+    });
+    const value = await getValue();
+    await t.expect(value).eql("BMW", "value doesn't change");
+  });
 });
diff --git a/testCafe/questions/rating.js b/testCafe/questions/rating.js
@@ -310,4 +310,13 @@ frameworks.forEach((framework) => {
     await t.expect(label1.hasClass("sd-rating__item--selected")).eql(false);
     await t.expect(label3.hasClass("sd-rating__item--selected")).eql(true);
   });
+
+  test("readonly:keyboard disabled", async (t) => {
+    await t.pressKey("tab").pressKey("right");
+    const getValue = ClientFunction(()=>{
+      return window["survey"].getAllQuestions()[0].value;
+    });
+    const value = await getValue();
+    await t.expect(value).eql(3, "value doesn't change");
+  });
 });