Filter input autocompleting with saved username in Chrome

Filter input autocompleting with saved username in Chrome

sammyblackbaronsammyblackbaron Posts: 8Questions: 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: 4,635Questions: 0Answers: 815

    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: 8Questions: 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: 49,474Questions: 1Answers: 7,277 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: 8Questions: 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: 8Questions: 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: 49,474Questions: 1Answers: 7,277 Site admin

    Thanks for posting back with your solution!

    Allan

  • ty_rexty_rex Posts: 4Questions: 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.

  • aedionaedion Posts: 1Questions: 0Answers: 0

    here my solution, just add default search value

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

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

  • jimmygagnon0078jimmygagnon0078 Posts: 2Questions: 0Answers: 0
    edited February 18

    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

  • jimmygagnon0078jimmygagnon0078 Posts: 2Questions: 0Answers: 0

    I found the solution

  • sammyblackbaronsammyblackbaron Posts: 8Questions: 2Answers: 0

    Can you share your solution @jimmygagnon0078 ?

  • dazerdazer Posts: 2Questions: 0Answers: 0

    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?

  • allanallan Posts: 49,474Questions: 1Answers: 7,277 Site admin

    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

  • dazerdazer Posts: 2Questions: 0Answers: 0

    @allan I have sent you a message with link.

  • ty_rexty_rex Posts: 4Questions: 0Answers: 0
    edited February 20

    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');
        }
    });
    
  • sammyblackbaronsammyblackbaron Posts: 8Questions: 2Answers: 0

    That makes more sense, nice solution @ty_rex

  • hizkiahizkia Posts: 1Questions: 0Answers: 0

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

    i really confused before for this fenomena

  • emdebevecemdebevec Posts: 1Questions: 0Answers: 0
    edited March 20

    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.

  • muammarmuammar Posts: 1Questions: 0Answers: 0

    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');
        }     
    });  
    
  • samsonbeksamsonbek Posts: 1Questions: 0Answers: 0

    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.

Sign In or Register to comment.