Search and Top Navigation
#8323 closed bug (notabug)
Opened May 15, 2012 01:23AM UTC
Closed May 15, 2012 01:10PM UTC
Last modified May 15, 2012 01:50PM UTC
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();" />
Attachments (0)
Change History (8)
Changed May 15, 2012 01:43AM UTC by comment:1
| owner: | → larsinsd |
|---|---|
| status: | new → pending |
Changed May 15, 2012 12:15PM UTC by comment:2
| status: | pending → new |
|---|
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>.
Changed May 15, 2012 12:44PM UTC by comment:3
| status: | new → pending |
|---|
Can you please clean that up so that it's more readable and remove all of the inline event handlers?
Changed May 15, 2012 12:52PM UTC by comment:4
| status: | pending → new |
|---|
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
Changed May 15, 2012 01:10PM UTC by comment:5
| resolution: | → invalid |
|---|---|
| status: | new → closed |
This is not related to sortable at all. You're calling .disableSelection() on the list, which kills the ability to focus. See #7735.
Changed May 15, 2012 01:38PM UTC by comment:6
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.
Changed May 15, 2012 01:42PM UTC by comment:7
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.
Changed May 15, 2012 01:50PM UTC by comment:8
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
Please read the red box and create a reduced test case using jsFiddle or jsbin.