(fix): firefox not able to focus on inputs - closes #2288

src/app/common/components/draggable-list/list.component.html

@@ -25,6 +25,7 @@
     [dndDraggable]="item"
     [dndEffectAllowed]="'move'"
     [dndDragImageOffsetFunction]="dragImageOffsetRight"
+    [dndDisableIf]="disabled"
     class="m-draggableList__listItem"
   >
     <ng-container

src/app/common/components/draggable-list/list.component.ts

@@ -22,6 +22,7 @@ export class DraggableListComponent {
   @Input() dndEffectAllowed: EffectAllowed = 'copyMove';
   @Input() id: string;
   @Input() headers: string[];
+  @Input() disabled: boolean;
   @ContentChild(TemplateRef, { static: false }) template: TemplateRef<any>;
   @Output() emptyListHeaderRowClicked: EventEmitter<any> = new EventEmitter();
   @Output() arrayChanged: EventEmitter<any> = new EventEmitter();
@@ -77,4 +78,19 @@ export class DraggableListComponent {
       y: event.offsetY + 10,
     };
   };
+
+  /**
+   * If input is focused then disable dragging
+   */
+  onFocusIn(e: FocusEvent | MouseEvent) {
+    this.disabled = true;
+  }
+
+  /**
+   * Re-enable when input not focused
+   * TODO: Make this smarter.. what if something else disabled the dragging?
+   */
+  onFocusOut(e: FocusEvent | MouseEvent) {
+    this.disabled = false;
+  }
 }

src/app/modules/pro/settings/settings.component.html

@@ -559,6 +559,7 @@
                           [id]="'tag'"
                           (emptyListHeaderRowClicked)="addBlankTag()"
                           (arrayChanged)="setTags($event)"
+                          #hashtagDraggable
                         >
                           <ng-template let-tag="item" let-i="i">
                             <ng-container [formGroupName]="i">
@@ -569,6 +570,10 @@
                                 [name]="'tag[' + i + '][label]'"
                                 formControlName="label"
                                 autofocus
+                                (focusin)="hashtagDraggable.onFocusIn($event)"
+                                (focusout)="hashtagDraggable.onFocusOut($event)"
+                                (mouseover)="hashtagDraggable.onFocusIn($event)"
+                                (mouseout)="hashtagDraggable.onFocusOut($event)"
                               />
                               <input
                                 class="m-draggableList__cell form-control"
@@ -576,6 +581,10 @@
                                 [id]="'tag-tag-' + i"
                                 [name]="'tag[' + i + '][tag]'"
                                 formControlName="tag"
+                                (focusin)="hashtagDraggable.onFocusIn($event)"
+                                (focusout)="hashtagDraggable.onFocusOut($event)"
+                                (mouseover)="hashtagDraggable.onFocusIn($event)"
+                                (mouseout)="hashtagDraggable.onFocusOut($event)"
                               />
                             </ng-container>
                           </ng-template>
@@ -622,6 +631,7 @@
                           [id]="'title'"
                           (emptyListHeaderRowClicked)="addBlankFooterLink()"
                           (arrayChanged)="setFooterLinks($event)"
+                          #footerDraggable
                         >
                           <ng-template let-link="item" let-i="i">
                             <ng-container [formGroupName]="i">
@@ -632,6 +642,10 @@
                                 [name]="'footer_link[' + i + '][title]'"
                                 formControlName="title"
                                 autofocus
+                                (focusin)="footerDraggable.onFocusIn($event)"
+                                (focusout)="footerDraggable.onFocusOut($event)"
+                                (mouseover)="footerDraggable.onFocusIn($event)"
+                                (mouseout)="footerDraggable.onFocusOut($event)"
                               />
 
                               <input
@@ -640,6 +654,10 @@
                                 [id]="'footer_link-href-' + i"
                                 [name]="'footer_link[' + i + '][href]'"
                                 formControlName="href"
+                                (focusin)="footerDraggable.onFocusIn($event)"
+                                (focusout)="footerDraggable.onFocusOut($event)"
+                                (mouseover)="footerDraggable.onFocusIn($event)"
+                                (mouseout)="footerDraggable.onFocusOut($event)"
                               />
                             </ng-container>
                           </ng-template>