JQuery UI sortable elements and input fields not working in Firefox

Update because I found a solution for this which I posted as an answer to my own question: The disableSelection () method needs to be removed. The original post is here for reference in case anyone is facing this same issue:

:::::::

I am using JQuery UI Sortable method and I encountered strange error with Firefox fields and... For some reason, input fields added to sortable items cannot be activated in Firefox. You cannot focus on them unless you right-click them. This issue is missing in Chrome.

See the JS Fiddle here and note that this is only a problem if you are viewing it in Firefox. For the record, I'm on Firefox 33, and I've reproduced this on Firefox 32 as well:

http://jsfiddle.net/t1795601/

Here is the code from the fiddle. This is almost exactly what JQuery UI uses for its demo, except for the added input field to demonstrate the problem:

Libraries:

 <link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>

      

        
        
        
      

    

My HTML:

<h4>An input outside of the sortable boxes works:</h4>
<input type="text" placeholder="this input works"/>
<br/>

<h4>But if you try to add an input field inside one of the sortable boxes, you cannot click it in Firefox.</h4>
<h6>Note that the markup for the sortable boxes is copied directly from jquery.com as is the corresponding CSS and JS</h6>
   <div class="sortable-lists">
    <ul id="sortable1" class="connectedSortable">
        <li class="ui-state-default">Item 1</li>
        <li class="ui-state-default">Item 2</li>
        <li class="ui-state-default">Item 3</li>
        <li class="ui-state-default">Item 4</li>
        <li class="ui-state-default">Item 5</li>
    </ul>
    <ul id="sortable2" class="connectedSortable">
    <li class="ui-state-highlight"><input type="text" placeholder="this input does not"/></li>
    <li class="ui-state-highlight">Item 2</li>
    <li class="ui-state-highlight">Item 3</li>
    <li class="ui-state-highlight">Item 4</li>
    <li class="ui-state-highlight">Item 5</li>
    </ul>
</div>

      

        
        
        
      

    

My CSS:

 #sortable1, #sortable2 {
border: 1px solid #eee;
width: 40%;
min-height: 20px;
list-style-type: none;
margin: 0;
padding: 5px 0 0 0;
float: left;
margin-right: 10px;
}
#sortable1 li, #sortable2 li {
margin: 0 5px 5px 5px;
padding: 5px;
font-size: 1.2em;
width: 90%;
cursor:pointer;
}

      

        
        
        
      

    

My JS:

 $(function() {
$( "#sortable1, #sortable2" ).sortable({
connectWith: ".connectedSortable"
}).disableSelection();
});