Question

I have a table whose body I’ve made sortable using jQuery UI’s Sortable function. Within this sortable table, I have a textarea which allows the user to enter comments about a given table entry.

<table id="status">
    <thead>
        <tr>
            <th>Name</th>
            <th>Comment</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="dragHandle">Jason</td>
            <td><textarea class="commentBox"></textarea></td>
        </tr>
    </tbody>
</table>

And the javascript to make the table sortable (with a helper function for making tables sortable I found online)

// Return a helper with preserved width of cells
var fixHelper = function(e, ui) {
    ui.children().each(function() {
        $(this).width($(this).width());
    });

    return ui;
};

$("#status").sortable({
    helper: fixHelper,
    axis: 'y',
    handle: '.dragHandle'
}).disableSelection();

Text entry into this textarea works fine, however when I try to select text within the textarea, nothing happens. Even using Shift+Arrow Keys does not behave as I would expect.

How do I make a textarea’s text selectable while still making the entire table sortable?

Already Attempted:

• Doing a sortable “destroy” on the table when a textarea gets focus to try and temporarily allow selectability, but even after the destroy, text selection is still wonky.

• Setting the ‘handle’ property of the sortable to make only the Name field sortable

• Setting the ‘disable’ property of the sortable to disable when initiated from textareas

• Capturing the mousedown/mouseup events in the textarea (or a div containing the textarea) and calling event.stopPropagation()

Answer 1

What’s the reasoning for using disableSelection? That is the reason your textArea is not getting focus.