Sortable: Inputs inside of sortable items are un selectable.

[JoshWillik]

I'd like to preface this issue by saying thank you for a really great library. I was using html5sortable before, and this library is so much less buggy.

This line in the current version of the library causes any input or textarea inside a Sortable list to be unclickable.

When the mouse button is released, the event is preventDefaulted and the cursor is not placed in the text.

This breaks many content management systems that use sortable items.

Here is a jsfiddle demonstrating the problem.

[rodislav]

I have tested the issue you described, and the problem seems to be obsolete in Chrome, is it present in other browsers ?

btw, for inputs and stuff, maybe is better to create move handler (dedicated icon), so input forms remains un-affected by dragging !?

[JoshWillik]

Oh interesting. The problem does not exist in Chrome.
It is most noticeably present in Firefox.

And making a handle may be an appropriate workaround, but the inability to change cursor location in an input is still a bug.

[rodislav]

in firefox input gets focus and user can type, in IE.. as usual,

I think a temp. workaround could be - special/separate handler for the input container

[JoshWillik]

The input getting focus is not the problem. Once the input has focus, the
cursor location cannot be changed by a mouse click.

On Mon, Jul 6, 2015 at 8:26 AM, Rodislav Moldovan [email protected]
wrote:

in firefox input gets focus and user can type, in IE.. as usual,

I think a temp. workaround could be - special/separate handler for the
input container

—
Reply to this email directly or view it on GitHub
https://github.com/RubaXa/Sortable/issues/462#issuecomment-118839635.

[ChiefORZ]

This bug is fixed in the dev branch of Sortable.

Take a look at https://jsfiddle.net/ogu8cywg/
I implemented the newest version in script tags

I tested it with Chrome, Mozilla, Safari, MS IE and MS Edge... Issue can be closed

[RubaXa]

@ChiefORZ Yes.

[JoshWillik]

@ChiefORZ The jsfiddle provided still behaves in a buggy fashion in Firefox 40.0.3.

[BurninLeo]

I want do follow up JoshWillik: Great package (I postponed the sorting feature for years and was impressed how fast this packages solved all the problems I had in mind) - and still a minor issue with text inputs within a sortable DIV in Firefox 41.0.1.

Some more details: I have an outer DIV with multiple DIVs inside that may be sorted. Within each inner DIV there are more inline-block DIVs (cells) and one of them contains a INPUT TYPE="text" (same result if the INPUT is not within a cell-DIV, but directly within the inner DIV). When clicking the text input, it received the focus, but the cursor always jumps the the left-most position (or whereever the cursor has been set with the arrow keys previously). Also, I cannot select text with the mouse cursor.

Tried (a) to give the input a class "nodrag" and set the option filter: ".nodrag" - but then I couldn't focus the text input any more. Tried (b) to attach an onclick-event to the text input that stopped bubbling of the event, but that did not have any visible effect. Of course, I tried the DEV branch from the link above, as well.

[BurninLeo]

Okay ... it seems that problem is: Sortable catches the mousedown event and stops it from bubbling. Here's a workound: In line 285 of the fiddle, linked above, there is a evt.preventDefault(), which is triggered if the filter matches. If this line is removed, the INPUT get a class "nodrag" and set Sortable's option filter: ".nodrag", then editing the text input works in Firefox (also testes in latest IE).

Warning: I do not fully understand, why the mousedown event was catched, here. This may have side-effects, if advanced filtering is used for the Sortable. Maybe, a sufficient bugfix may be skipping the preventDefault() if the event's sender was an INPUT or TEXTAREA.

[MiguelQueiroz]

i also have this issue.. the rows of the table that i told to be disabled in the sorting plugin, now have their select elements somehow faulty, because you can click, but then , it does not open the selector options. Its like something focus out right there. Im using Chrome last?
see this jsbin
http://jsbin.com/joxugoxipu/edit?html,css,js,output

UPDATE
i could eventually fix this, by changing the code, to make

   if (filter) {
          if(!options.handle ){
          evt.preventDefault();  
          }

          return; // cancel dnd
        }

Because when there is handle, then there is no need to prevent default click on the items like selectors etc, like it was calling a preventDefault... so thats why the selector did not worked. But because im using the handle to say what moves or not, i dont have to lock the row selector etc... for that

it works good as you can see in this modified jsbin http://jsbin.com/lekajomoko/edit?html,css,js,output

[WilCodeBoer]

Hi there.

I'm having the same issue which I fixed by changing the code but I can't really do that anymore.
I'm adding Sortable as an npm package which won't let me change the source code.

Is there a solution that doesn't include editing sortable.js?

[isaaclisg]

This bug still exists on Edge and Firefox, try any jsfiddle link around here and test with the current Sortable.js. In Firefox the cursor can't be set on any position, in Edge you can't do anything inside the textbox