Why does a non-default value for `scrollY` cause unchecking of a pre-checked radio button?

Tracy Logan

Link to test case: live.datatables.net/vuyucuve/1/edit

Description of problem: On a page with a radio button group, with one of the buttons hard-coded as checked, setting any value for the DataTables option scrollY (other than the default empty string) causes that checked button to become unchecked.

This goofy/esoteric bug was confirmed using the above test case with Chrome (Version 97.0.4692.71 (Official Build) (x86_64)) and Safari (Version 15.2 (15612.3.6.1.8, 15612)) on MacOS Catalina 10.15.7 (19H1615) and also Chrome & Firefox on Android 8.

colin

I'm not sure if I'm doing this wrong, but I enabled scrollY (and added paging), and after clicking on any of the radio buttons and then scrolling, the radio remains in the same state - see here.

Could you look at that, please, and see if it helps. If it's still not working for you, please can you update my example, or link to your page, so that we can see the problem.

Cheers,

Colin

Tracy Logan

Thanks, Colin! Your example shows the same problem -- I didn't explain clearly enough what that is:

The first radio button should be checked upon page load (because it has checked="checked"). With an empty/default scrollY value, that happens as expected:

The bug(?) is that any other value for scrollY causes that first checkbox to become unchecked:

FWIW, on the real page (with a ~2s load time), you can see that the first button starts out checked, as expected, but is cleared when the DataTables .draw() completes

allan

What's happening here is that when DataTables' scrolling is enabled, it has to split the table into two separate tables - the header and the body (plus a footer if you have one, which you don't here). It clones the elements and re-inserts them into the document in hidden parts. So actually there are two table headers on the page, the second one is hidden.

Because that second one is being inserted into the document, and has the same name as the other radio buttons, it is the one that gets checked!

The reason it doesn't happen with scrollY: '' is because that doesn't enable scrolling in the table.

Unfortunately, this isn't an easy thing to fix in DataTables due to how we are cloning the header information. It isn't a "real" clone - it is just a string copy, so we insert the element into the document (causing this effect) because we can modify the element to remove that name attribute which would solve this.

At the moment, the workaround is to use a little Javascript to reselect the correct element once the table has been initialised:

$('input[name=filter]').eq(0).prop('checked', true);

http://live.datatables.net/vuyucuve/10/edit

note that if you are Ajax loading data, that would need to be done in initComplete or init.

Allan

Tracy Logan

What a great explanation -- thanks for taking the time to write that out, Allen; I'd started to dig into the guts of DT, but it would have taken forever to figure that out!

Makes lots of sense, and your suggested workaround does the trick (extra thanks for the AJAX tip, as that's what we're doing!)