fix(chat): file drop in firefox (#2776)

akveo · Nov 9, 2021 · 07db7f5 · 07db7f5
1 parent 3795905
commit 07db7f5
Showing 1 changed file with 34 additions and 29 deletions.
diff --git a/src/framework/theme/components/chat/chat-form.component.ts b/src/framework/theme/components/chat/chat-form.component.ts
@@ -62,25 +62,29 @@ import { NbComponentOrCustomStatus } from '../component-status';
       </ng-container>
     </div>
     <div class="message-row">
-      <input nbInput
-             fullWidth
-             [status]="getInputStatus()"
-             (focus)="inputFocus = true"
-             (blur)="inputFocus = false"
-             (mouseenter)="inputHover = true"
-             (mouseleave)="inputHover = false"
-             [(ngModel)]="message"
-             (ngModelChange)="onModelChange($event)"
-             [class.with-button]="showButton"
-             type="text"
-             placeholder="{{ fileOver ? dropFilePlaceholder : messagePlaceholder }}"
-             (keyup.enter)="sendMessage()">
-      <button nbButton
-              [status]="getButtonStatus()"
-              *ngIf="showButton"
-              [class.with-icon]="!buttonTitle"
-              (click)="sendMessage()"
-              class="send-button">
+      <input
+        nbInput
+        fullWidth
+        [status]="getInputStatus()"
+        (focus)="inputFocus = true"
+        (blur)="inputFocus = false"
+        (mouseenter)="inputHover = true"
+        (mouseleave)="inputHover = false"
+        [(ngModel)]="message"
+        (ngModelChange)="onModelChange($event)"
+        [class.with-button]="showButton"
+        type="text"
+        placeholder="{{ fileOver ? dropFilePlaceholder : messagePlaceholder }}"
+        (keyup.enter)="sendMessage()"
+      />
+      <button
+        nbButton
+        [status]="getButtonStatus()"
+        *ngIf="showButton"
+        [class.with-icon]="!buttonTitle"
+        (click)="sendMessage()"
+        class="send-button"
+      >
         <nb-icon *ngIf="!buttonTitle; else title" [icon]="buttonIcon" pack="nebular-essentials"></nb-icon>
         <ng-template #title>{{ buttonTitle }}</ng-template>
       </button>
@@ -89,7 +93,6 @@ import { NbComponentOrCustomStatus } from '../component-status';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class NbChatFormComponent {
-
   status: NbComponentOrCustomStatus = 'basic';
   inputFocus: boolean = false;
   inputHover: boolean = false;
@@ -142,18 +145,18 @@ export class NbChatFormComponent {
    *
    * @type {EventEmitter<{ message: string, files: File[] }>}
    */
-  @Output() send = new EventEmitter<{ message: string, files: File[] }>();
+  @Output() send = new EventEmitter<{ message: string; files: File[] }>();
 
   /**
    * Emits when message input value has been changed
    * @type {EventEmitter<string>}
    */
+  // eslint-disable-next-line @angular-eslint/no-output-on-prefix
   @Output() onInputChange = new EventEmitter<string>();
 
   @HostBinding('class.file-over') fileOver = false;
 
-  constructor(protected cd: ChangeDetectorRef, protected domSanitizer: DomSanitizer) {
-  }
+  constructor(protected cd: ChangeDetectorRef, protected domSanitizer: DomSanitizer) {}
 
   @HostListener('drop', ['$event'])
   onDrop(event: any) {
@@ -163,7 +166,6 @@ export class NbChatFormComponent {
 
       this.fileOver = false;
       if (event.dataTransfer && event.dataTransfer.files) {
-
         for (const file of event.dataTransfer.files) {
           const res = file;
 
@@ -190,15 +192,19 @@ export class NbChatFormComponent {
     }
   }
 
-  @HostListener('dragover')
-  onDragOver() {
+  @HostListener('dragover', ['$event'])
+  onDragOver(event: DragEvent) {
+    event.preventDefault();
+    event.stopPropagation();
     if (this.dropFiles) {
       this.fileOver = true;
     }
   }
 
-  @HostListener('dragleave')
-  onDragLeave() {
+  @HostListener('dragleave', ['$event'])
+  onDragLeave(event: DragEvent) {
+    event.preventDefault();
+    event.stopPropagation();
     if (this.dropFiles) {
       this.fileOver = false;
     }
@@ -246,5 +252,4 @@ export class NbChatFormComponent {
   onModelChange(value: string): void {
     this.onInputChange.emit(value);
   }
-
 }