Results 1 to 6 of 6

Thread: How can I prevent Chrome from auto completing a textfield?

  1. #1
    Sencha Premium Member
    Join Date
    Nov 2007
    Location
    Sydney
    Posts
    117
    Answers
    3

    Question How can I prevent Chrome from auto completing a textfield?

    We're using a custom search field in our ExtJS 6.6 classic application. It is fairly straightforward with the code for the view and view controller shown below.
    The issue is that if the user has their password saved in Chrome to log in to the site, Chrome insists on filling this field in with the user name associated with the website.

    I've confirmed via Chrome DevTools inspector that autocomplete="off" is set on the <input> element, however some Googling suggests that Chrome ignores this setting.
    I've tried assigning a GUID as the 'name' property of the field to ensure it is alway unique - the field still auto completes.
    I've set the field to read only, then setting read only to false upon the focus event. This comes the closest to working with the field remaining blank, but Chrome still provides a popup prompting for the username to be entered into the field upon focus.

    Any suggestions on how to prevent this from happening?

    Code:
    Ext.define('EB.view.SearchField', {
        extend: 'Ext.form.field.Text',
        alias: 'widget.searchfield',
    
        requires: [
            'EB.view.SearchFieldViewModel',
            'EB.view.SearchFieldViewController',
            'Ext.form.trigger.Trigger'
        ],
    
        controller: 'searchfield',
        viewModel: {
            type: 'searchfield'
        },
        width: 150,
        hideLabel: true,
    
        triggers: {
            clear: {
                handler: function() {
                    this.setValue('');
                    this.getTrigger('clear').hide();
                },
                cls: 'x-form-clear-trigger',
                hidden: true
            },
            search: {
                cls: 'x-form-search-trigger'
            }
        }
    
    });
    Code:
    Ext.define('EB.view.SearchFieldViewController', {
        extend: 'Ext.app.ViewController',
        alias: 'controller.searchfield',
    
        control: {
            "textfield": {
                change: 'onTextfieldChange',
                specialkey: 'onTextfieldSpecialkey'
            }
        },
    
        onTextfieldChange: function(field, newValue, oldValue, eOpts) {
            if (newValue.length > 0) {
                field.getTrigger('clear').show();
            } else {
                field.getTrigger('clear').hide();
            }
        },
    
        onTextfieldSpecialkey: function(field, e, eOpts) {
            if (e.getKey() == e.ESC) {
                field.setValue('');
                field.getTrigger('clear').hide();
                e.stopEvent();
            }
        }
    
    });

  2. #2
    Sencha - Forum Administrator
    Join Date
    Sep 2017
    Posts
    1,006
    Answers
    5

    Default

    Thank you so much for your post. I apologize for the delay. I have shared this with the support staff and someone will get back to provide assistance as soon as possible. Your patience is greatly appreciated!

    Kind Regards,

    Michele


  3. #3
    Sencha Premium User danguba's Avatar
    Join Date
    Feb 2009
    Location
    Kragujevac, Serbia
    Posts
    462
    Answers
    1

    Default

    Have you tried to set autocomplete to some random value? Also you may try to add hidden textfield before the one you have problem with.
    I guess you have already tried these tricks but just in case you didn't...
    All Best
    ---
    Željko Mitrović
    http://skitanja.blogspot.com/

    "Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live." Martin Golding

  4. #4
    Sencha Premium Member matei's Avatar
    Join Date
    Jun 2008
    Location
    Cluj-Napoca
    Posts
    84
    Answers
    1

    Default

    still does not fix entire problem.

    for example it fixes one case, but not all:

    https://www.sencha.com/forum/showthr...88#post1325188

  5. #5

    Join Date
    Jan 2008
    Location
    Levittown, PA
    Posts
    359
    Answers
    2

    Default

    You can try this:

    inputAttrTpl: ['autocomplete="off"'],

  6. #6
    Sencha Premium Member matei's Avatar
    Join Date
    Jun 2008
    Location
    Cluj-Napoca
    Posts
    84
    Answers
    1

    Default

    nop still does not work :|
    but is nice config that I did not know, thanks. Seems to put that value in dom, but does not change the behavior, even the "manage addresses" does not disapear in this case, seems that setting it with js (this.inputEl.set({autocomplete: this.name ? 'new-' + this.name : 'none')}) removes the Manage Addresses (menu) from autocomplete dropdown.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •