Fixed #7820 - [React, Angular] File Uplod - A file chooser dialog is …

…invoked twice
surveyjs · Feb 8, 2024 · d85e4a8 · d85e4a8
1 parent c081dc0
commit d85e4a8
Show file tree

Hide file tree

Showing 6 changed files with 8 additions and 6 deletions.
diff --git a/packages/survey-angular-ui/src/components/file/choose-file.component.html b/packages/survey-angular-ui/src/components/file/choose-file.component.html
@@ -1,7 +1,7 @@
 <ng-template #template>
     <label tabindex="0" [class]="question.getChooseFileCss()"
         [attr.for]="question.inputId" [attr.aria-label]="question.chooseButtonText" [key2click]
-        (click)="question.chooseFile()">
+        (click)="question.chooseFile($event)">
         <svg *ngIf="question.cssClasses.chooseFileIconId" [title]="question.chooseButtonText"
             [iconName]="question.cssClasses.chooseFileIconId" [size]="'auto'" sv-ng-svg-icon></svg>
         <span>{{ question.chooseButtonText }}</span>

diff --git a/packages/survey-vue3-ui/src/components/file/FileChooseButton.vue b/packages/survey-vue3-ui/src/components/file/FileChooseButton.vue
@@ -5,7 +5,7 @@
     :for="question.inputId"
     v-bind:aria-label="question.chooseButtonText"
     v-key2click
-    v-on:click="question.chooseFile()"
+    v-on:click="question.chooseFile($event)"
   >
     <sv-svg-icon
       v-if="question.cssClasses.chooseFileIconId"

diff --git a/src/knockout/components/file/choose-file.html b/src/knockout/components/file/choose-file.html
@@ -1,4 +1,4 @@
-<label tabindex="0" data-bind="css: question.koChooseFileCss, key2click, click: function() { question.chooseFile(); }, attr: { for: question.inputId, 'aria-label': question.koGetChooseButtonText() }">
+<label tabindex="0" data-bind="css: question.koChooseFileCss, key2click, click: function(d, e) { question.chooseFile(e); }, attr: { for: question.inputId, 'aria-label': question.koGetChooseButtonText() }">
   <!-- ko if: question.cssClasses.chooseFileIconId -->
     <!-- ko component: { name: 'sv-svg-icon', params: { title: question.koGetChooseButtonText(), iconName: question.cssClasses.chooseFileIconId, size: 'auto' } } --><!-- /ko -->
   <!-- /ko -->

diff --git a/src/question_file.ts b/src/question_file.ts
@@ -475,8 +475,10 @@ export class QuestionFileModel extends QuestionFileModelBase {
   public set maxSize(val: number) {
     this.setPropertyValue("maxSize", val);
   }
-  public chooseFile(): void {
+  public chooseFile(event: MouseEvent): void {
     const inputElement = document.getElementById(this.inputId) as HTMLInputElement;
+    event.preventDefault();
+    event.stopImmediatePropagation();
     if (inputElement) {
       if (this.survey) {
         this.survey.chooseFiles(inputElement, files => this.loadFiles(files), { element: this });

diff --git a/src/react/components/file/file-choose-button.tsx b/src/react/components/file/file-choose-button.tsx
@@ -19,7 +19,7 @@ export class SurveyFileChooseButton extends ReactSurveyElement {
         className={this.question.getChooseFileCss()}
         htmlFor={this.question.inputId}
         aria-label={this.question.chooseButtonText}
-        onClick={() => this.question.chooseFile()}
+        onClick={(e) => this.question.chooseFile(e.nativeEvent)}
       >
         {(!!this.question.cssClasses.chooseFileIconId) ? <SvgIcon title={this.question.chooseButtonText} iconName={this.question.cssClasses.chooseFileIconId} size={"auto"}></SvgIcon>: null }
         <span>{this.question.chooseButtonText}</span>

diff --git a/src/vue/components/file/file-choose-button.vue b/src/vue/components/file/file-choose-button.vue
@@ -5,7 +5,7 @@
     :for="question.inputId"
     v-bind:aria-label="question.chooseButtonText"
     v-key2click
-    v-on:click="function() { question.chooseFile(); }"
+    v-on:click="function(event) { question.chooseFile(event); }"
   >
     <sv-svg-icon
       v-if="question.cssClasses.chooseFileIconId"