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?

Ext.define('EB.view.SearchField', {
    extend: 'Ext.form.field.Text',
    alias: 'widget.searchfield',

    requires: [

    controller: 'searchfield',
    viewModel: {
        type: 'searchfield'
    width: 150,
    hideLabel: true,

    triggers: {
        clear: {
            handler: function() {
            cls: 'x-form-clear-trigger',
            hidden: true
        search: {
            cls: 'x-form-search-trigger'

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) {
        } else {

    onTextfieldSpecialkey: function(field, e, eOpts) {
        if (e.getKey() == e.ESC) {