Problem Inserting Cursor and Selecting Text in IE11, Edge, and Firefox

[kevinjsmith]

When the dndNoDrag directive is set on an input element, I am seeing a problem in IE11, Edge, and Firefox (Chrome and Opera work fine) where clicking in the input box does not insert a cursor in the box. However, if I double-click, then I get a cursor. But the cursor does not insert where I clicked, it inserts at the beginning of the box. This problem, as well as a workaround, is suggested in the angularjs library that this library is based on, and is documented here: https://github.com/marceljuenemann/angular-drag-and-drop-lists/issues/127#issuecomment-295234653

Inspired by the suggested workaround, I have created the following directive, which completely solves this problem in Firefox. In IE11 and Edge the problem with inserting the cursor is also resolved, but unfortunately a new problem is created. When I try to select text in the input box with my mouse, instead of the text being selected, the input box's parent container gets dragged, even though I have explicitly set draggable="false" on the parent during the mouseenter event. Any one have an idea how I might fix this?

import { Directive, ElementRef, Renderer2, HostListener } from '@angular/core';

@Directive({
  selector: '[appDndNoDragMouseover]'
})
export class DndNoDragMouseoverDirective {
  a = [];

  constructor(private el: ElementRef, private renderer: Renderer2) { }

  @HostListener('mouseenter') mouseenter() {
    let h = this.el.nativeElement;
    let p = h.parentNode;
    this.a.push(h.draggable);
    if (h.draggable) {
      this.renderer.setAttribute(h, 'draggable', 'false');
    }
    while (p.parentNode) {
      this.a.push(p.draggable);
      if (p.draggable) {
        this.renderer.setAttribute(p, 'draggable', 'false');
      }
      p = p.parentNode;
    }
  }

  @HostListener('mouseleave') mouseleave() {
    let i = 0;
    let h = this.el.nativeElement;
    let p = h.parentNode;
    if (this.a[i]) {
      this.renderer.setAttribute(h, 'draggable', 'true');
    }
    while (p.parentNode) {
      i++;
      if (this.a[i]) {
        this.renderer.setAttribute(p, 'draggable', 'true');
      }
      p = p.parentNode;
    }
  }

}

[misha130]

Not sure about solution, but maybe just cancel text select? user-select: none;

[kevinjsmith]

I actually did try that, but it didn't work.