Cannot click on input field within table header tag

Question

I am using Datatables and a columnsize library to resize the columns. In the columnsize library "mousedown" on th prevents default. ColReorderWithResize Plug-in

       $(nTh)
            .on( 'mousedown.ColReorder', function (e) {
                e.preventDefault();
                if (e.which == 1) {
                    that._fnMouseDown.call( that, e, nTh, i );
                }
            } )
            .on( 'touchstart.ColReorder', function (e) {
                that._fnMouseDown.call( that, e, nTh, i );
            } );

Although I am using event.stopPropagation() on table header input fields, they are still not clickable. I can tab through and enter text within, however. Is there a way to fix this without modifying/breaking the parent library.

JSFiddle will help in testing the issue.

gaetanoM · Accepted Answer · 2020-09-25 14:45:03Z

In order to solve your issue you need to .focus() your input when you click. Hence, you can write and apply sorting...

$("#example > thead > tr > th:first").html("<input type='text' placeholder='Name'>")
var table = $('#example').DataTable({
    'ajax': 'https://gyrocode.github.io/files/jquery-datatables/arrays.json',
    'dom': 'Rlfrtip',
    'colReorder': {
        'allowReorder': false
    }
});

$("#example > thead > tr > th:first input").on('click', function (e) {
    e.stopPropagation();
    $(this).focus();
}).on('input', function (e) {
    table.column(0).search(this.value, true).draw();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css">
<script src="//cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/jeffreydwalter/ColReorderWithResize@9ce30c640e394282c9e0df5787d54e5887bc8ecc/ColReorderWithResize.js"></script>

<table id="example" class="display" cellspacing="0" width="100%">
    <thead>
    <tr>
        <th class="no-sort">Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Extn</th>
        <th>Start date</th>
        <th>Salary</th>
    </tr>
    </thead>
    <tfoot>
    <tr>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Age</th>
        <th>Start date</th>
        <th>Salary</th>
    </tr>
    </tfoot>
</table>

Savvy · Accepted Answer · 2020-09-25 14:39:48Z

0

Found a working solution. Since the library event fires on mousedown, added it as a listener on the input.

$('input', table.column(colIdx).header()).on('mousedown click', function(e) {
  e.stopPropagation();
});

Also have click since that prevents it from undue sorting on click. I'm however unsure if having multiple listeners would affect in performance on a page with large no. of rows.

answered Sep 25, 2020 at 14:39

Savvy

921 silver badge9 bronze badges

Collectives™ on Stack Overflow

Cannot click on input field within table header tag

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related