Possible bug on Column Filtering

dlopezz

Hello guys,

While checking this example:

Column filtering

I saw that there's a bug. Details:

1. Put string "Acc" in Position column and you will get the new table with the search (2 rows).
2. When you try to select the text in a row with the mouse (dragging with your mouse) you won't be able. You will have to select the text a second time for it to work properly.

This is awful especially if the row has a link, so the users will have to click the link twice.

Is there any solution for this?

Thank you in advance.

colin

Yep, I'm seeing that too, it happens when the table is slightly scrolled. We'll take a look and report back - thanks for letting us know,

Colin

dlopezz

Looking forward for the solution. Thank you.

allan

Interestingly it is a Chrome / Blink only issue this - doesn't happen in Firefox.

Change the event listener to be:

                    $(
                        'input',
                        $('.filters th').eq($(api.column(colIdx).header()).index())
                    )
                        .off('keyup change')
                        .on('change', function (e) {
                            // Get the search value
                            $(this).attr('title', $(this).val());
                            var regexr = '({search})'; //$(this).parents('th').find('select').val();

                            var cursorPosition = this.selectionStart;
                            // Search the column for that value
                            api
                                .column(colIdx)
                                .search(
                                    this.value != ''
                                        ? regexr.replace('{search}', '(((' + this.value + ')))')
                                        : '',
                                    this.value != '',
                                    this.value == ''
                                )
                                .draw();
                        })
                        .on('keyup', function (e) {
                            e.stopPropagation();

                            $(this).trigger('change');
                            $(this)
                                .focus()[0]
                                .setSelectionRange(cursorPosition, cursorPosition);
                        });

I've committed the fix here. Thanks for flagging this up.

Allan

dlopezz

This change solves the "dragging the mouse over the text" problem, but the bug still happens when clicking links contained in the table.

Live example

The same:

1. Make a search
2. Try clicking a "Link"

Users will have to click the link twice.

Is possible to solve this?

Thank you in advance.

dlopezz

I have trying some changes but it still happens.. Any clue to solve this?

dlopezz

Solved.

If anyone face this in the future, the solution is to use the Javascript code from this other example:

FixedHeader example

Thank you.

allan

Interestingly, that approach only works with an older version of FixedHeader. With the current version the focus is lost as soon as you type into the input element (which is what all that range setting code is about).

I think we probably need to go back and check the range selection code to understand why it is messing up selection in Chrome.

Thanks,
Allan