Fix add image item fails after deleting (#5825)

surveyjs · Aug 27, 2024 · 511566f · 511566f
1 parent 9201ec8
commit 511566f
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 9 deletions.
diff --git a/packages/survey-creator-core/src/components/image-item-value.ts b/packages/survey-creator-core/src/components/image-item-value.ts
@@ -99,4 +99,8 @@ export class ImageItemValueWrapperViewModel extends ItemValueWrapperViewModel {
   get acceptedTypes() {
     return getAcceptedTypesByContentMode(this.question.contentMode);
   }
+  public dispose(): void {
+    this.itemsRoot = undefined;
+    super.dispose();
+  }
 }
diff --git a/packages/survey-creator-vue/src/adorners/ImageItemValue.vue b/packages/survey-creator-vue/src/adorners/ImageItemValue.vue
@@ -35,15 +35,23 @@
             :size="24"
           ></sv-svg-icon>
         </span>
-        <div v-if="adorner.canRenderControls" class="svc-context-container svc-image-item-value-controls">
+        <div
+          v-if="adorner.canRenderControls"
+          class="svc-context-container svc-image-item-value-controls"
+        >
           <span
             class="svc-context-button"
             @click="adorner.chooseFile(adorner)"
             v-key2click
             :title="undefined"
             :aria-label="undefined"
           >
-            <sv-svg-icon role="button" :iconName="'icon-file'" :size="24" :title="adorner.selectFileTitle"></sv-svg-icon>
+            <sv-svg-icon
+              role="button"
+              :iconName="'icon-file'"
+              :size="24"
+              :title="adorner.selectFileTitle"
+            ></sv-svg-icon>
           </span>
           <span
             class="svc-context-button svc-context-button--danger"
@@ -52,7 +60,12 @@
             :title="undefined"
             :aria-label="undefined"
           >
-            <sv-svg-icon role="button" :iconName="'icon-delete'" :size="24" :title="adorner.removeFileTitle"></sv-svg-icon>
+            <sv-svg-icon
+              role="button"
+              :iconName="'icon-delete'"
+              :size="24"
+              :title="adorner.removeFileTitle"
+            ></sv-svg-icon>
           </span>
         </div>
       </template>
@@ -90,7 +103,11 @@
             :title="undefined"
             :aria-label="undefined"
           >
-            <sv-svg-icon :iconName="'icon-add-lg'" :size="24" :title="adorner.addFileTitle"></sv-svg-icon>
+            <sv-svg-icon
+              :iconName="'icon-add-lg'"
+              :size="24"
+              :title="adorner.addFileTitle"
+            ></sv-svg-icon>
           </span>
         </div>
       </template>
@@ -104,7 +121,7 @@ import {
   SurveyCreatorModel,
   ImageItemValueWrapperViewModel,
 } from "survey-creator-core";
-import { computed, onMounted, ref } from "vue";
+import { computed, onMounted, onUpdated, ref } from "vue";
 
 const props = defineProps<{
   componentName: string;
@@ -121,14 +138,19 @@ const question = computed(() => props.componentData.question);
 const item = computed(() => props.componentData.item);
 const root = ref<HTMLDivElement>();
 const adorner = useCreatorModel(
-  () =>
-    new ImageItemValueWrapperViewModel(
+  () => {
+    const viewModel = new ImageItemValueWrapperViewModel(
       creator.value,
       question.value,
       item.value,
       null as any,
       null as any
-    ),
+    );
+    if (root?.value) {
+      viewModel.itemsRoot = root.value;
+    }
+    return viewModel;
+  },
   [() => creator.value, () => question.value, () => item.value],
   (value) => {
     value.dispose();
@@ -142,7 +164,6 @@ const newItemStyle = computed(() => {
     height: needStyle ? question.value.renderedImageHeight + "px" : undefined,
   };
 });
-
 onMounted(() => {
   if (root.value) {
     adorner.value.itemsRoot = root.value;

diff --git a/testCafe/designer/surface.ts b/testCafe/designer/surface.ts
@@ -110,6 +110,40 @@ test("Check imagepicker add/delete items style", async (t) => {
     .click(".svc-image-item-value-controls__add");
 });
 
+test("Check imagepicker add/delete - 5817", async (t) => {
+  await t.resizeWindow(1920, 1080);
+  await explicitErrorHandler();
+  await setJSON({
+    elements: [{
+      type: "imagepicker", name: "q1", choices: [
+        {
+          "value": "lion",
+          "imageLink": "lion.jpg"
+        },
+        {
+          "value": "giraffe",
+          "imageLink": "lion.jpg"
+        }
+      ]
+    }]
+  });
+  await ClientFunction(() => {
+    const creator = (window as any).creator;
+    creator.selectElement(creator.survey.getQuestionByName("q1"));
+  })();
+  await t
+    .expect(Selector(".svc-tab-designer .svc-image-item-value--new").visible).ok()
+    .click(".svc-image-item-value-controls__add")
+    .setFilesToUpload(getVisibleElement(".svc-image-item-value--new").find(".svc-choose-file-input"), "./image.jpg")
+    .expect(Selector(".svc-image-item-value").nth(2).find("img").hasAttribute("src")).ok()
+    .click(Selector(".svc-context-button--danger").nth(2))
+    .expect(Selector(".svc-image-item-value").nth(2).hasClass("svc-image-item-value--new")).ok()
+    .expect(Selector(".svc-tab-designer .svc-image-item-value--new").visible).ok()
+    .click(".svc-image-item-value-controls__add")
+    .setFilesToUpload(getVisibleElement(".svc-image-item-value--new").find(".svc-choose-file-input"), "./image.jpg")
+    .expect(Selector(".svc-image-item-value").nth(2).find("img").hasAttribute("src")).ok();
+});
+
 test("Check imagepicker delete item", async (t) => {
   await t.resizeWindow(1920, 1080);
   await explicitErrorHandler();