Opened 8 years ago

Closed 8 years ago

Last modified 8 years ago

#8323 closed bug (notabug)

input text fields not working within sortable div

Reported by: larsinsd Owned by: larsinsd
Priority: minor Milestone: 1.9.0
Component: ui.sortable Version: 1.8.20
Keywords: Cc:
Blocked by: Blocking:

Description

If you have <input type="text"> fields inside of a droppable <ul>, they don't work with Firefox 12. Everything works great in Safari and Chrome, but in FF, you can't select the textarea.

<ul style="list-style-type: none;" id="pagesSortable" class="sortablePages"> <li style="margin: 5px;"><input type="checkbox" name="ShowPage_Homepage" value="Yes" $homepageChecked <li style="margin: 5px;"><input type="checkbox" name="ShowPage_Monthly" value="Yes" $monthlyChecked onclick="setUnsavedItemCookie(1);" /> Calendar</li> <li style="margin: 5px;"><input type="checkbox" name="ShowPage_Store" value="Yes" $storeChecked onclick="setUnsavedItemCookie(1);" /> $teamPortalData->{'StoreName'}, <span style="white-space: nowrap;">Link Name: <input type="text" name="storeLinkName" id="storeLinkName" value="$fansite{'storeLinkName'}" size="15" maxlength="32" /></span></li> </ul> ... <img src="/images/spacer.png" onload="$('#pagesSortable,#expandedPagesSortable').sortable({ connectWith:'.sortablePages', axis:'y', placeholder:'ui-state-highlight', delay: 500, distance: 5, stop: function (event,ui) { if (confirm('Do you want to move this page here?')) { moveCustomPage($('#pagesSortable').sortable('toArray'),$('#expandedPagesSortable').sortable('toArray')); } else { $('#pagesSortable').sortable('cancel'); $('#expandedPagesSortable').sortable('cancel');} } }).disableSelection();" />

Change History (8)

comment:1 Changed 8 years ago by Scott González

Owner: set to larsinsd
Status: newpending

Please read the red box and create a reduced test case using jsFiddle or jsbin.

comment:2 Changed 8 years ago by larsinsd

Status: pendingnew

Ok - load it in Chrome and you'll see the <input> can be clicked on, but load it in Firefox (at least on Mac, the only thing I have with me at the moment), and you'll see you can't put anything in the <input>.

http://jsbin.com/eqivey/2

comment:3 Changed 8 years ago by Scott González

Status: newpending

Can you please clean that up so that it's more readable and remove all of the inline event handlers?

comment:4 Changed 8 years ago by larsinsd

Status: pendingnew

http://jsbin.com/eqivey/5

Also, not to be all "hey my problems are more important than anyone else's", but it's kind of a critical bug for our particular application. (http://www.greenrope.com)

We use this for our website CMS and allowing people to rename some of their pages is important.

Let me know if there's anything else I can do to assist you, and thank you very much for taking the time to look this over!

Lars

comment:5 Changed 8 years ago by Scott González

Resolution: invalid
Status: newclosed

This is not related to sortable at all. You're calling .disableSelection() on the list, which kills the ability to focus. See #7735.

comment:6 Changed 8 years ago by larsinsd

I don't think you want to close this ticket yet - you have known behavior differences in browsers. This means that on Chrome, Safari, and IE, the disableSelection() function isn't working for <input> fields.

I think what you have is a usability issue here. Either <input> fields should be editable when disableSelection() is called (something I'd recommend), as the behavior in Safari/Chrome/IE or they shouldn't.

And, by the way, there is NO DOCUMENTATION on the disableSelection() function in the sortable docs. At the very least, if you're going to have a function that you refer to in every example, you should document what it does. I'd suggest in the Methods area, but it's up to you. Or... you can make all of us guess what that function does and make us do our own browser regression testing.

comment:7 Changed 8 years ago by Scott González

Did you read the other tickets? We already have a ticket open for the different behavior, and we're going to be removing that functionality entirely.

comment:8 Changed 8 years ago by larsinsd

Aha - my bad. I thought since it was crossed out that you had already fixed it, and not given it a "wontfix". I assume since you're removing the .disableSelect() function you will be removing it from all the examples soon.

Given the amount of confusion this appears to have caused, the sooner the better for your users, especially the newer ones.

Thank you for reviewing all of this.

Lars

Note: See TracTickets for help on using tickets.