Cannot enter value into input[text] on Safari 9 when it has the dnd-nodrag directive

[jisuo]

Using: Safari Version 9.0 (11601.1.56) OS X 10.11 (have not tested on other safari versions)

Example fiddle: http://jsfiddle.net/63qvw2kp/1/

Can sometimes just enter a single character. Sometimes none.

[rastasheep]

Seems like click events are not propagated to input field too.

Same situation is with Firefox 41.01 on Mac.

[rastasheep]

This caused by default css styles in Safari for draggable input elements (input is draggable but it's 'stubbed' to do nothing => same effect as not draggable).

To fix this just add a css like:

input[draggable="true"] {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

http://stackoverflow.com/questions/32192686/cannot-type-in-password-field-with-draggable-true-in-safari

Firefox problem is more dificult, it's a bug in Firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=800050 https://bugzilla.mozilla.org/show_bug.cgi?id=1189486

[FrankBright]

@marceljuenemann Has this task been fixed?

[FrankBright]

@rastasheep doesn't work for me, did you test it ?

[bersling]

Thanks to the others for the hints, that's how I did it.

<ul class='task-list-wrapper'
    dnd-inserted="$ctrl.updateTaskList($ctrl.dragOrigin, index)"
    dnd-list="$ctrl.parent.childrenTasks">
  <li ng-repeat="task in $ctrl.parent.childrenTasks"
      class="tb-drag-parent"
      dnd-disable-if="!task.draggable"
      dnd-dragstart="$ctrl.dragOrigin = $index"
      dnd-draggable="task">
    
    <task-drag-handle ng-mouseenter="task.draggable = true" ng-mouseleave="task.draggable = false"></task-drag-handle>
    
    <div class="removable">
      <i ng-show="$ctrl.settings.isEditable"
         class="fa fa-remove remove-icon top-left"
         ng-click="$ctrl.deleteTaskFromParentByIndex($index, $ctrl.parent)"></i>
      <taskk task="task" settings="$ctrl.settings"></taskk>
    </div>
    
  </li>
  <spinner center="true" size="35" ng-if="$ctrl.loading"></spinner>
</ul>

Works, the code is in use. Important note: Won't work when you have a dnd-nodrag inside of the li! However, with this code, you won't need a dnd-nodrag anymore. This solved two issues for me: 1st the input is clickable again in Firefox and IE, second, the text is highlightable again in all browsers!

[Goddak]

I posted something that may help with this issue here