Fix file edit question to use afterRenderQuestion method

surveyjs · Jul 28, 2024 · 8c1d7b0 · 8c1d7b0
1 parent 59e2b6a
commit 8c1d7b0
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 4 deletions.
diff --git a/packages/survey-creator-angular/src/custom-questions/file.component.html b/packages/survey-creator-angular/src/custom-questions/file.component.html
@@ -1,5 +1,6 @@
 <div [class]="model.cssClasses.root" (dragenter)="model.onDragEnter($event)" (dragover)="model.onDragOver($event)"
-  (drop)="model.onDrop($event)" (dragleave)="model.onDragLeave($event)" (keydown)="model.onKeyDown($event)">
+  (drop)="model.onDrop($event)" (dragleave)="model.onDragLeave($event)" (keydown)="model.onKeyDown($event)"
+  #contentElement>
   <input type="text" [disabled]="model.isInputReadOnly" [class]="model.cssClasses.control"
     [value]="model.renderedValue ||''" (change)="model.onInputChange($event)" (blur)="model.onInputBlur($event)"
     [attr.placeholder]="model.renderedPlaceholder" />

diff --git a/packages/survey-creator-knockout/src/adorners/question-image.ts b/packages/survey-creator-knockout/src/adorners/question-image.ts
@@ -31,7 +31,7 @@ ko.components.register("svc-image-question", {
       model["placeholderComponentData"] = {
         name: "survey-question-file",
         data: model.filePresentationModel,
-        afterRender: () => { }
+        afterRender: model.filePresentationModel.koQuestionAfterRender
       };
       return model;
     }

diff --git a/packages/survey-creator-knockout/src/custom-questions/question-file.html b/packages/survey-creator-knockout/src/custom-questions/question-file.html
@@ -1,3 +1,4 @@
+<!-- ko template: { afterRender: question.koQuestionAfterRender } -->
 <div
   data-bind="css: question.cssClasses.root, event: { keydown: question.koOnKeyDown, dragenter: question.ondragenter, dragover: question.ondragover, drop: question.ondrop, dragleave: question.ondragleave }">
   <input type="text"
@@ -16,4 +17,5 @@
       <!-- ko component: { name: 'sv-svg-icon', params: { title: question.chooseButtonCaption, iconName: question.cssClasses.chooseButtonIcon, size: 'auto' } } --><!-- /ko -->
     </label>
   </div>
-</div>
+</div>
+<!-- /ko -->
diff --git a/packages/survey-creator-react/src/custom-questions/FileEditQuestion.tsx b/packages/survey-creator-react/src/custom-questions/FileEditQuestion.tsx
@@ -80,6 +80,7 @@ export class SurveyQuestionFileEditor extends SurveyQuestionText {
     return (
       <div
         className={this.questionFile.cssClasses.root}
+        ref={el => this.setContent(el)}
         onDragEnter={this.questionFile.onDragEnter}
         onDragOver={this.questionFile.onDragOver}
         onDrop={this.questionFile.onDrop}

diff --git a/packages/survey-creator-vue/src/custom-questions/File.vue b/packages/survey-creator-vue/src/custom-questions/File.vue
@@ -6,6 +6,7 @@
     @drop="question.onDrop"
     @dragleave="question.onDragLeave"
     @keydown="question.onKeyDown"
+    ref="root"
   >
     <input
       type="text"
@@ -67,6 +68,8 @@ import type { QuestionFileEditorModel } from "survey-creator-core";
 import { useQuestion } from "survey-vue3-ui";
 import { ref } from "vue";
 
+const root = ref<HTMLElement>();
+
 const props = defineProps<{ question: QuestionFileEditorModel }>();
-useQuestion(props, ref<HTMLElement>());
+useQuestion(props, root);
 </script>