Filter input autocompleting with saved username in Chrome

sammyblackbaron · February 2019

We have had reports of many users of our site having their saved username autofilling in the filter in datatables, but only in Chrome. Please see the example screenshot below:

https://drive.google.com/file/d/1l_0hcFjmk8KpNigF1af1sLGVIZiJsOLo/view?usp=sharing

"Cherie" is the saved username using Chrome's password manager from another field, on another form, on another page. Can anyone help me with how to prevent this? I have been trying to alter the main datatables.js script to include autocomplete"off"/autocomplete="nope" etc tags but nothing seems to prevent this.

The really annoying thing is that it is not consistent across different machines both using Chrome and its password manager - some do it, some don't.

It's happening with DataTables 1.9.3 and DataTables 1.10.16 (both in use on our sites and previously working fine up until about 2 weeks ago).

colin · February 2019

Hi @sammyblackbaron ,

I think you should just be able to add autocomplete="off" to the input element (according to this SO thread). You could add that attribute in the initComplete, something like this,

Cheers,

Colin

sammyblackbaron · February 2019

Thanks for the reply @colin but unfortunately it didn't solve the problem. I have tried using initComplete to set autocomplete="off" and I have also tried modifying the DataTables source javascript to manually change the search <input type="text" /> to <input type="search" autocomplete="off" />. Both of these are rendering correctly in the browser, but both still result in the username saved in the Chrome password manager to autofill in as default.

I really don't know why this is doing it - the names/ids/classes used by DataTables are all different to the ones I am using everywhere else in the site.

allan · February 2019

Wow - that's very odd behaviour from Chrome. I'm tempted to just disable autocomplete there, but I bet some folks use it and like it.

The line you have changed is the one where it should be added. Can you see your extra attribute in the inspector on your page I'm not sure there is much we can do if Chrome is ignoring that!

Allan

sammyblackbaron · February 2019

Thanks for the reply @allan. If you haven't had any feedback from others with this problem then it has to be something unique to our site but I don't know what. We're getting more and more reports of it daily - without any code changes in the site. It's like when Chrome is getting an update, it starts happening.

If you do get wind of anyone else with a similar problem, can you please post back here to save what's left of my hair?

ps. Thanks for building such a useful and easy to use tool

sammyblackbaron · February 2019

OK @allan @colin I have fixed it on my site. The only solution to it was to wrap the filter text input within a form tag with autocomplete="off".

eg:

var filter = $('<div/>', {
    'id': ! features.f ? tableId+'_filter' : null,
    'class': classes.sFilter,
} )
.append( $('<form autocomplete="off" class="custom_datatables_search_form" />').append( $('<label/>' ).append( str ) ) );

I then also had to disable the form from submitting on pressing enter:

$(document).on("keyup keypress", ".custom_datatables_search_form", function (e) {
    var keyCode = e.keyCode || e.which;
    if (keyCode === 13) { 
    e.preventDefault();
    return false;
    }
});

Without the form tag, it seems like Chrome didn't know what to do with it and therefore autocompleted it with the saved username.

It's not very clean but it's the only solution I could write that fixed it! Hope this helps in case anyone else ever has this issue.

allan · February 2019

Thanks for posting back with your solution!

Allan

ty_rex · February 2019

Yep, we've just started having this problem too. It must be something to do with the latest version of Chrome.

Thank you for the workaround - will give it a go now.

aedion · February 2019

here my solution, just add default search value

"oSearch": {"sSearch": " "},

hahahaha ....pretty good for me ...

jimmygagnon0078 · February 2019

I cannot implement this solution... I cannot disable the form from submitting on pressing enter as our site is sending too many ajax requests and I need to prevent it. Is it something that will be fixed in the future version of datatables?
Thanks

jimmygagnon0078 · February 2019

I found the solution

sammyblackbaron · February 2019

Can you share your solution @jimmygagnon0078 ?

dazer · February 2019

This problem occured to us today also and i wasn't able to get @sammyblackbaron 's solution working.. any ideas to get this fixed asap?

allan · February 2019

Can any of you give me a link to a page that demonstrates this behaviour? I've not seen it yet, but I'm guessing that some recent Chrome update has changed how they do the auto fill.

Allan

dazer · February 2019

@allan I have sent you a message with link.

ty_rex · February 2019

It's not easy to demonstrate because it only happens if Chrome has some cached autofil entries from other forms and is confused into thinking that DataTables needs them.

We fixed using an adaptation of @sammyblackbaron's code above:

$('#tag').DataTable({
    otherOptions: {},
    initComplete: function() {
        $(this.api().table().container()).find('input').parent().wrap('<form>').parent().attr('autocomplete', 'off');
    }
});

sammyblackbaron · February 2019

That makes more sense, nice solution @ty_rex

hizkia · February 2019

@sammyblackbaron @ty_rex thanks dude , you really solve my problem for last 2 days .

i really confused before for this fenomena

emdebevec · March 2019

Like everyone else I've had this happen more and more lately. As I looked at it, it seemed that the last text input on the page was receiving the autofilled username. As the above posts described, I put the form with autocomplete set to "off" around that input and then the username would show up in the next to the last text input. I did a little more searching and it looks like the problem might be because chrome finds a password input somewhere in the page and for whatever reason it figures the input before that is the username. I have a modal change password form at the bottom of every page so that would account for it. Instead of putting a form around all the text inputs on the page, I put an empty text box just above my change password form. I didn't give it an ID or name and set the width and height to 0 so you can't see it. Everything works fine now as chrome is apparently happy autofilling that unseen text input. Whether this is the best way to deal with it, I don't know. But it's simple and it seems to work, at least until google decides to change something else.

Just for completeness, here is what I added:
<input type="text" style="width:0;height:0" value="username">

I tried setting display to none or visibility to hidden or using a hidden input, but those did not work. Seems the input has to be "visible" even if it has zero height and width. I put the value in just to remind myself what it was for.

muammar · March 2019

Add this for better look

$('#datatable-responsive3').DataTable({
    "ordering": false,
    initComplete: function() {
        $(this.api().table().container()).find('input[type="search"]').parent().wrap('<form>').parent().attr('autocomplete','off').css('overflow','hidden').css('margin','auto');
    }     
});

samsonbek · May 2019

I faced this issue in Chrome, and was able to fix it by adding hidden input fields on top of the page, like described here https://stackoverflow.com/a/23234498/3012170.

BrunoMigliaretti · June 2019

I'have created a mini site to demonstrate the bug: http://chrometest.magiccms.org/home and I'have reported the bug to chromium developing group:

colin · June 2019

Hi @BrunoMigliaretti ,

That's excellent. I just followed your steps, I'm on Chrome 73.0.3683.86 on Fedora, and can't reproduce the problem, so maybe it's been fixed.

Cheers,

Colin

luisrortega · August 2019

I'm having the same problem... Wrap it in a form (with autocomplete off) did not fix the problem, nor adding a "hidden field" before did not work either, nor it did dancing the macarena in from of the source code.

One interesting note is that even if I remove the search from sDom, it will still set the filter... when I look into my request against my server, it is still adding the username as a search value!

Chrome 75 and 76 on Mac and Windows.

luisrortega · August 2019

So, I decided to do the column search, where the user can search for each specific field rather than the "generic" search... then I removed the 'f' from the "sDom", weird enough, it still sends the filter to the server-side... even if the input is not there (or at least not visible...

I then added back the 'f', and before typing anything, I went to the inspector and literally deleted the input field... still... the username is passed as a filter to the server end! How?

colin · August 2019

Hi @luisrortega ,

then I removed the 'f' from the "sDom", weird enough, it still sends the filter to the server-side...

Yep, that's because you can also filter the table with search(), so just because the filter box isn't displayed, doesn't mean the table isn't being globally filtered still.

The problem with the autocomplete is odd, many people are saying the workarounds works for them. Are you able to link to a page demonstrating the problem?

Cheers,

Colin

messi89 · September 2021

Hello guys

I tried all your solutions but no one works with me, this is how I have managed this issue:

preDrawCallback: function() {
                let el = $('div.dataTables_filter label');
                if(!el.parent('form').length) {
                    el.wrapAll('<form></form>').parent()
                    .attr('autocomplete', false)
                    .attr('autofill', false);
                }
            }

I use the preDrawCallback instead of the initComplete callback, but as the preDrawCallback is fired on each raw, I add an if statement to avoid multiple wrapping of form tag

Regards;

colin · September 2021

Nice, thanks for posting,

Colin

zlatan9 · December 2021

Just added action="javascript:void(0);" to the form to prevent inconsistent search results.

preDrawCallback: function() {
                let el = $('div.dataTables_filter label');
                if(!el.parent('form').length) {
                    el.wrapAll('<form action="javascript:void(0);"></form>').parent()
                    .attr('autocomplete', false)
                    .attr('autofill', false);
                }
            }

colin · December 2021

Thanks for posting, sorry you have to post twice, the spam filter kicked in!

Colin

andreitofan · May 2023

A solution I found that works on the latest version of Chrome in May 2023 is this:

dataTable.one('draw.dt', function () {
    // Disable autocomplete for the search box
    $('.dataTables_filter input').each(function () {
        this.type = 'search';
        this.autocomplete = 'cc-number';
    });
});

Note that Chrome is not respecting the autocomplete attribute and there is no guarantee this will be a long-term fix.

Filter input autocompleting with saved username in Chrome

Filter input autocompleting with saved username in Chrome

Answers

Howdy, Stranger!

Categories

DataTables

Filter input autocompleting with saved username in Chrome

Filter input autocompleting with saved username in Chrome

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables