Data tables with links does not work after search filter
Data tables with links does not work after search filter
![rafaelrmontes](https://datatables.net/forums/uploads/userpics/379/nFKVFW9TWSK3I.jpg)
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.
Replies
You'll need to give me a link to a test case showing the issue, per the forum rules please.
Allan
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!
Works for me, first time - both Chrome and Firefox.
Steps taken:
If it isn't working for you I'd suggest checking if you have any browser extensions installed and trying with them disabled.
Allan
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
@allan I just confirm that I don't have any extension installed, I tried with Google chrome
I was able to recreate the issue on a Mac with a fairly recent version of Chrome.
Kevin
@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
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 typetiger
in the Name column search input. HitTAB
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:
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
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![;) ;)](https://datatables.net/forums/resources/emoji/wink.png)
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:
input
event rather thankeyup change
. Chrome doesn't seem to have the issue with that: https://live.datatables.net/texokuki/4/edit .Allan
Thank you very much, it worked!