Strange issue - Fixed

[lenamtl]

Hi,

I have a big issue...
If I select checkboxes and refresh the page = the checkboxes get deselected = OK

If I select checkboxes and go to another the page, and click back from the browser
= the checkboxes are still selected = Not OK

I have checked my localstorage and there are no localstorage for the Selection...
So how come these are still selected?
If I refresh the page there are no more selected checkbox, I'm pulling my hair with this, any clue?

Here is my Datatables settings

"stateSave": true,
{									
				
	"targets": 1,
	"visible": true,
	"searchable": false,
	"orderable": false,
	"checkboxes": {
			"selectRow": true,
			"stateSave": false, 
        }
},

"select": {
	'style': 'multi',
	'selector': 'td:nth-child(2)',
},

[lenamtl]

Hi,

I have fixed this way for now

JS

// refresh
if(performance.navigation.type == 2){
location.reload(true);
}

The 2 indicates the page was accessed by navigation into the history.

[mpryvkin]

Can you provide an URL or an example demonstrating the issue?

[lenamtl]

After investigations, it was an autocomplete issue
like we often see in a form but I didn't thought that could happens to a table :)

Here is the code fix:

initComplete: function (row) {
    $('th.dt-checkboxes-cell').find('input').attr('autocomplete', 'off');
    $('th.dt-checkboxes-select-all').find('input').attr('autocomplete', 'off');
    $('.dt-checkboxes').attr('autocomplete', 'off');
    },

[mpryvkin]

Thanks for the follow-up and showing the workaround! I might add autocomplete="off" attribute to the checkbox HTML code. However need to research this further.

From MDN page:

Note: The autocomplete attribute also controls whether Firefox will — unlike other browsers — persist the dynamic disabled state and (if applicable) dynamic checkedness of an <input> element, <textarea> element, or entire <form> across page loads. The persistence feature is enabled by default. Setting the value of the autocomplete attribute to off disables this feature. This works even when the autocomplete attribute would normally not apply by virtue of its type. See bug 654072.

[lenamtl]

To what I have read putting autocomplete="off" to a form tag will work better compare if applied to an input, but in our case it's not a form, so I don't know how reliable it is.

I have tested with Chrome, Opera and Firefox and IE 11 and this is working fine for now.

Forcing the code refresh based on browser historic is another alternative but we can see the checkboxed checked then uncheck (this is fast but we can see it) .

[lenamtl]

To fix it directly into your plugin code
Let me know if this is ok

if(ctx.aoColumns[i].mRender === null){
                  colOptions['render'] = function(){
                     //return '<input type="checkbox" class="dt-checkboxes">';
		       return '<input type="checkbox" class="dt-checkboxes" autocomplete="off">';
                  };
               }
 //selectAllRender: '<input type="checkbox">'
selectAllRender: '<input type="checkbox" autocomplete="off">'

[mpryvkin]

That seems safe, I will apply the change later today. Thank you!