Magento2: How to disable password autofill on store-configuration?

Question

I have 2 fields on my system.xml.
The first one is an authentication key (obscured).
The second one is an email.
The thing is, because I use my email & it's also saved in my browser with a password, Chrome autofills my password into the first field, even after I save the right key it loads the form with the saved password from the browser.
Here is an example screenshot of what I mean:

-- Any idea?

Answer 1

You can achieve this by adding the 'autocomplete=off' attribute to your input. You're going to need to create a frontend model and add it to your fields in the system.xml

NoAutoComplete.php (frontend model)

<?php

namespace Vendor\CustomModule\Model\Frontend;

class NoAutoComplete extends \Magento\Config\Block\System\Config\Form\Field
{
    /**
    @param  \Magento\Framework\Data\Form\Element\AbstractElement $element
    Output : return string
     */
    protected function _getElementHtml(\Magento\Framework\Data\Form\Element\AbstractElement $element)
    {
        $html = '<input id="' . $element->getHtmlId() .
                '" name="' . $element->getName() .
                '" autocomplete="off" />';

        return $html;
    }
}

system.xml

   <field id="credentials" translate="label" type="text" sortOrder="1" >
       <label>Credentials</label>
       <frontend_model>Vendor\CustomModule\Model\Frontend\NoAutoComplete</frontend_model>
   </field>