Data tables with links does not work after search filter

rafaelrmontes

hello
There is a case where if you have a column a list of custom links, then you apply a filter in any column then you do click over the hyperlink of the filtered results it doesn’t work, you have to do click again and then the link will work,
Can someone help me to figure out how to fix this?
I tried already to do draw but still not working the user has to do one click and then other click to open the link, it doesn’t work at the first time.
I notice when you do click the first time, it creates the hyperlink in the DOM on the fly and that’s the reason you are able to access to the link the second time.

allan

You'll need to give me a link to a test case showing the issue, per the forum rules please.

Allan

rafaelrmontes

Hello @allan ,
here is an example, https://live.datatables.net/texokuki/1/
search under the name Tiger Nixon, and then do click over the name, the first time doesn't work until you click the second time.
please advise and tank you!

allan

Works for me, first time - both Chrome and Firefox.

Steps taken:

1. Load https://live.datatables.net/texokuki/1/edit
2. In the preview page, type "Tige" into the search box (I tried both the global search and the column search)
3. Click the link in the first column
4. Takes me to a 404 error page

If it isn't working for you I'd suggest checking if you have any browser extensions installed and trying with them disabled.

Allan

rafaelrmontes

Hi @allan,
insted to use the global search, use the columns search, here are the steps.

1.Load https://live.datatables.net/texokuki/1/edit
2.In the preview page, type "Tige" into the search box (column search)
3. Click the link in the first column.
the first time you click it, it won't do anything, if you click it again then it will open the 404 error page.
the problem is that the user has to do twice click to go, making the feeling that the system is slow or not working.
also how we can have the entire row as a link?
thank you

rafaelrmontes

@allan I just confirm that I don't have any extension installed, I tried with Google chrome

kthorngren

I was able to recreate the issue on a Mac with a fairly recent version of Chrome.

Kevin

rafaelrmontes

@kthorngren Thank you,
the version of chrome I'm using and having the issue is
Version 126.0.6478.127 (Official Build)
also I got reports is happening on windows pc.
@allan @kthorngren should I open a defect or how this item should be addressed ?
Thank you

kthorngren

should I open a defect or how this item should be addressed ?

No, this is the place to work on the issue.

I started looking at the issue. It seems to be a focus issue. I commented out the column().search() call to highlight the issue better.
https://live.datatables.net/texokuki/2/edit

Type tiger in the Name column search input. Scroll down to Tiger and click the link and the search input will be brought back into view.

Click the Run with JS button then type tiger in the Name column search input. Hit TAB and the focus stays on the Name search input. Hit TAB again and it will move to the Position search input.

I tried removing things like:

              $(this)
              .focus()[0]
              .setSelectionRange(cursorPosition, cursorPosition);

but the problem continues. The above code snippet stops the first tab from moving to the Position column.

This example doesn't not have this issue and its not cloning the header:
https://live.datatables.net/cedayopa/323/edit

I adapted that example to clone the header and it still works:
https://live.datatables.net/koheninu/1/edit

Sorry, I'm not sure what is wrong in your code. Maybe @allan has an idea.

Kevin

allan

Thanks for the investigations Kevin! I totally agree, it is a focus issue. I have managed to recreate it in Chrome Linux and Chrome Windows. Firefox doesn't appear to have the issue, so the fix is obviously to use Firefox

It appears to be something to do with the event handling of Chrome, combined with the redraw of the table. Using the Chrome profiler I can see that when the problem happens it is due to the event handler triggering from change and causing the table to redraw - I suspect the action of the DOM element being reattached to the DOM is causing the "break" that causes Chrome not to fallow the link, although I don't know the Chrome internals well enough to be able to say more than that guess.

When clicking the second time the event handler doesn't trigger, so there is no redraw, and it goes through.

Two possible fixes:

1. The easiest is just to use the input event rather than keyup change. Chrome doesn't seem to have the issue with that: https://live.datatables.net/texokuki/4/edit .
2. Check the current search value to see if the value selected is already applied or not. If it matches, then don't apply and redraw the table. I think this would be good practice anyway.

Allan

rafaelrmontes

Thank you very much, it worked!