Enable browser autocomplete on user's own address fields

src/elements/Address.php

@@ -288,6 +288,18 @@ public function getAttributeLabel($attribute): string
         };
     }
 
+    /**
+     * Whether the address is owned by the current user
+     *
+     */
+    public function getIsOwnAddress(): bool
+    {
+        $userId = Craft::$app->getUser()->getId();
+        $ownerId = $this->ownerId;
+
+        return $ownerId === $userId;
+    }
+
     /**
      * @inheritdoc
      */

src/helpers/Cp.php

@@ -1396,6 +1396,49 @@ public static function addressCardHtml(Address $address, array $config = []): st
             Html::endTag('li'); // .address-card
     }
 
+    /**
+     * Returns an autocomplete value consistent with Input Purposes for User Interface Components ({@link https://www.w3.org/TR/WCAG21/#input-purposes})
+     *
+     * @param string $attribute
+     * @return string
+     */
+    private static function getInputPurpose(string $attribute): string
+    {
+        return match ($attribute) {
+            'fullName' => 'name',
+            'addressLine1' => 'address-line1',
+            'addressLine2' => 'address-line2',
+            'administrativeArea' => 'address-level1',
+            'locality' => 'address-level2',
+            'dependentLocality' => 'address-level3',
+            'countryCode' => 'country',
+            'postalCode' => 'postal-code',
+            'organization' => 'organization',
+            default => 'on',
+        };
+    }
+
+    /**
+     * Returns true or false based on whether the address is the current user's own address
+     *
+     * @param Address $address
+     * @return boolean
+     */
+    private static function enableAutofill(Address $address): bool
+    {
+        return $address->getIsOwnAddress();
+    }
+
+    /**
+     * Returns a randomized string for the autocomplete value to disable browser autocomplete
+     *
+     * @return string
+     */
+    private static function getBogusAutofillValue(): string
+    {
+        return 'disable-autofill-' . mt_rand();
+    }
+
     /**
      * Returns address fields’ HTML (sans country) for a given address.
      *
@@ -1410,6 +1453,8 @@ public static function addressFieldsHtml(Address $address): string
         $address->setScenario(Element::SCENARIO_LIVE);
         $activeValidators = $address->getActiveValidators();
         $address->setScenario($scenario);
+        $enableAutofill = self::enableAutofill($address);
+        $fakeAutofillValue = self::getBogusAutofillValue();
 
         foreach ($activeValidators as $validator) {
             if ($validator instanceof RequiredValidator) {
@@ -1431,22 +1476,22 @@ public static function addressFieldsHtml(Address $address): string
             static::textFieldHtml([
                 'status' => $address->getAttributeStatus('addressLine1'),
                 'label' => $address->getAttributeLabel('addressLine1'),
+                'autocomplete' => $enableAutofill ? self::getInputPurpose('addressLine1') : $fakeAutofillValue,
                 'id' => 'addressLine1',
                 'name' => 'addressLine1',
                 'value' => $address->addressLine1,
                 'required' => isset($requiredFields['addressLine1']),
                 'errors' => $address->getErrors('addressLine1'),
-                'autocomplete' => 'address-line1',
             ]) .
             static::textFieldHtml([
                 'status' => $address->getAttributeStatus('addressLine2'),
                 'label' => $address->getAttributeLabel('addressLine2'),
+                'autocomplete' => $enableAutofill ? self::getInputPurpose('addressLine2') : $fakeAutofillValue,
                 'id' => 'addressLine2',
                 'name' => 'addressLine2',
                 'value' => $address->addressLine2,
                 'required' => isset($requiredFields['addressLine2']),
                 'errors' => $address->getErrors('addressLine2'),
-                'autocomplete' => 'address-line2',
             ]) .
             self::_subdivisionField(
                 $address,
@@ -1479,12 +1524,12 @@ public static function addressFieldsHtml(Address $address): string
                 ]),
                 'status' => $address->getAttributeStatus('postalCode'),
                 'label' => $address->getAttributeLabel('postalCode'),
+                'autocomplete' => $enableAutofill ? self::getInputPurpose('postalCode') : $fakeAutofillValue,
                 'id' => 'postalCode',
                 'name' => 'postalCode',
                 'value' => $address->postalCode,
                 'required' => isset($requiredFields['postalCode']),
                 'errors' => $address->getErrors('postalCode'),
-                'autocomplete' => 'postal-code',
             ]) .
             static::textFieldHtml([
                 'fieldClass' => array_filter([
@@ -1512,6 +1557,8 @@ private static function _subdivisionField(
         $value = $address->$name;
         $options = Craft::$app->getAddresses()->getSubdivisionRepository()->getList($parents, Craft::$app->language);
 
+        $enableAutofill = self::enableAutofill($address);
+        $fakeAutofillValue = self::getBogusAutofillValue();
         if ($options) {
             // Persist invalid values in the UI
             if ($value && !isset($options[$value])) {
@@ -1530,6 +1577,7 @@ private static function _subdivisionField(
                         'value' => $value,
                         'options' => $options,
                         'errors' => $errors,
+                        'autocomplete' => $enableAutofill ? self::getInputPurpose($name) : $fakeAutofillValue,
                     ]) .
                     Html::tag('div', '', [
                         'id' => "$name-spinner",
@@ -1556,6 +1604,7 @@ private static function _subdivisionField(
                 'options' => $options,
                 'required' => $required,
                 'errors' => $address->getErrors($name),
+                'autocomplete' => $enableAutofill ? self::getInputPurpose($name) : $fakeAutofillValue,
             ]);
         }
 
@@ -1564,6 +1613,7 @@ private static function _subdivisionField(
             'fieldClass' => !$visible ? 'hidden' : null,
             'status' => $address->getAttributeStatus($name),
             'label' => $address->getAttributeLabel($name),
+            'autocomplete' => $enableAutofill ? self::getInputPurpose($name) : $fakeAutofillValue,
             'id' => $name,
             'name' => $name,
             'value' => $value,

src/templates/_includes/forms/select.twig

@@ -21,6 +21,7 @@
         (toggle ?? false) ? 'fieldtoggle' : null,
     ]|filter,
     name: name ?? false,
+    autocomplete: (autocomplete ?? false),
     autofocus: (autofocus ?? false) and not craft.app.request.isMobileBrowser(true),
     disabled: disabled ?? false,
     aria: {

src/templates/_includes/forms/selectize.twig

@@ -60,6 +60,7 @@
     class: (class ?? [])|explodeClass|push('selectize')|unique,
     inputAttributes: {
         style: {display: 'none'},
+        autocomplete: (not multi and autocomplete is defined) ? autocomplete : false
     }|merge(inputAttributes ?? [], recursive=true),
 } %}
 
@@ -104,6 +105,17 @@
 
     const $select = $(`#${id}`);
 
+    const allowAutocomplete = () => {
+        const $originalSelectInput = $($select[0]);
+        const autocompleteVal = $originalSelectInput.attr('autocomplete');
+        if (autocompleteVal !== undefined && autocompleteVal !== '') {
+            const selectize = $select.data('selectize');
+            const $controlInput = $(selectize.$control_input[0]);
+            $controlInput.removeAttr('autofill');
+            $controlInput.attr('autocomplete', autocompleteVal);
+        }
+    };
+
     const onChange = () => {
         const selectize = $select.data('selectize');
         const $items = selectize.$wrapper.find('.item');
@@ -217,6 +229,12 @@
                 .forEach((attr) => {
                     this.$control_input.attr(attr.name, attr.value);
                 });
+
+            // allow autocomplete;
+            // despite what the documentation says, the "autofill_disable" seems to be ON by default,
+            // and there's no "proper" way to disable it
+            // more info: https://github.com/selectize/selectize.js/issues/1535
+            allowAutocomplete();
         },
         onDropdownOpen: function() {
             positionDropdown();

src/web/assets/admintable/dist/manifest.json

@@ -1 +1 @@
-{"app.css":"/css/app.css","app.js":"/js/app.js","app.js.map":"/js/app.js.map"}
+{"app.css":"/css/app.css","app.js":"/js/app.js","app.css.map":"/css/app.css.map","app.js.map":"/js/app.js.map"}