Filter input autocompleting with saved username in Chrome

Filter input autocompleting with saved username in Chrome

sammyblackbaronsammyblackbaron Posts: 6Questions: 2Answers: 0

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).

Answers

  • colincolin Posts: 3,589Questions: 0Answers: 632

    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

  • sammyblackbaronsammyblackbaron Posts: 6Questions: 2Answers: 0

    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.

    :neutral:

  • allanallan Posts: 48,883Questions: 1Answers: 7,122 Site admin

    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

  • sammyblackbaronsammyblackbaron Posts: 6Questions: 2Answers: 0

    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? :smile:

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

  • sammyblackbaronsammyblackbaron Posts: 6Questions: 2Answers: 0
    edited February 14

    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.

  • allanallan Posts: 48,883Questions: 1Answers: 7,122 Site admin

    Thanks for posting back with your solution!

    Allan

  • ty_rexty_rex Posts: 3Questions: 0Answers: 0

    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.

Sign In or Register to comment.