[IE 11] Input field of type text does not respond to mouse clicks

[varunprakas]

I couldn't to able to get focus on the input element in IE 11, I need to double click to get focus on the input element. let me know whether this is a dnd library issue in IE

[richardj]

According to the documentation you can add a dnd-nodrag attribute to the input element.

https://github.com/marceljuenemann/angular-drag-and-drop-lists/blob/master/angular-drag-and-drop-lists.js#L516

That might work, else maybe provide some kind of demo that can be tested with the use case.

[rmatejka]

That doesn't work - broken in demo as well: http://marceljuenemann.github.io/angular-drag-and-drop-lists/demo/#/types

I've tried a number of work-arounds but still no luck. Clicking the "clear" X doesn't work either.

[varunprakas]

1 <dnd-nodrag> <div dnd-handle class="handle">:::</div> <div class="name"> <input type="text" ng-model="person.name" class="background-{{person.type}} form-control input-sm"> </div> </dnd-nodrag> 2. <input type="text" ng-model="person.name" dndNodrag>

I tried the above methods. but it didn't work for me. Please let me know the next step

[richardj]

@Varunprakas Side note, your second method needs to be: <input type="text" ng-model="person.name" dnd-nodrag>.

There seems to be a bug in IE11 related to draggable elements and input fields: https://connect.microsoft.com/IE/feedback/details/927470/ie-11-input-field-of-type-text-does-not-respond-to-mouse-clicks-when-ancestor-node-has-draggable-true

Maybe there is a way to rearrange your HTML structure to work around this problem?

[varunprakas]

Thanks for the immediate response. In the mentioned url i found one solution if (['input', 'textarea'].indexOf(element.tagName.toLowerCase()) > -1 && Array.prototype.some.call(document.querySelectorAll('[draggable="true"]'), function(el) {return el.contains(element);})) { element.focus(); } }, false); } but its working fine, But i can't move the cursor in between the text

[bartonsprings]

I have the same issue for IE10 and IE11. The mouse cursor is frozen in the textarea's but keyboard navigation works if there is at least one character present in the textarea. Any update on the fix on this issue?

[bartonsprings]

@Varunprakas - Were you able to find any solution. Where do you put the piece of code you mention above? I am also using Angular but trying to figure out where this goes? In a directive or controller?

Also, I lose the text selection capabilities even after I get the cursor back by double clicking inside the textarea. This would be a bummer that no drag and drop list support for entire IE family. Any other ideas for workarounds?

[aman541992]

What we observed, if we blur out and focus again the issue is resolved . However moving cursor position is still not accomplished. But at least does the trick for single click.

$(document).on('mouseup', '#id input:text, textarea', function (e) { $(this).blur();

        $(this).focus();
    });

[ivanjonas]

Seems like a nasty IE issue, because I'm experiencing it in a context completely devoid of angular or dragging libraries.

[caosbad]

@aman541992 try dom.setSelectionRange(pos, pos), if two pos are equal and the value are biger than the length of input text, the cursor will be move to the end of input.

[Goddak]

I posted something that may help with this issue here

[elsticky]

What we observed, if we blur out and focus again the issue is resolved . However moving cursor position is still not accomplished. But at least does the trick for single click.

$(document).on('mouseup', '#id input:text, textarea', function (e) { $(this).blur();

        $(this).focus();
    });

Based on this answer I have a directive in Angular right now containing:

constructor(private elementRef: ElementRef) {
  } 

  @HostListener('click', ['$event'])
  handleClick(event: Event) {
    this.elementRef.nativeElement.blur();
    this.elementRef.nativeElement.focus();
  }