Fix: Address selection errors.

The address selection dropdown was not appearing after a form submission error
involving the address lookup element.

Also:
- removed some unused and commented out Javascript code.
- improved code comments.

js/address_change.js

@@ -58,6 +58,7 @@
    * Populate Central Hub Selected Address
    *
    * Adds the selected address to drupalSettings.centralhub.selectedAddress.
+   *
    * @param  {jQuery} selectList
    *   Address selectlist element.
    */
@@ -87,7 +88,7 @@
         var searchButton = addressLookupElement.find('.js-address-searchbutton');
         var selectListContainer = addressLookupElement.find('.js-address-select-container');
         var selectList = selectListContainer.find('.js-address-select');
-        var error = selectListContainer.find('.js-address-error');
+        var error = selectListContainer.find('.js-address-error, .error');
 
         // Change the search button to normal button.
         searchButton.attr('type', 'button');
@@ -154,7 +155,7 @@
         var searchButton = addressLookupElement.find('.js-address-searchbutton');
         var selectListContainer = addressLookupElement.find('.js-address-select-container');
         var selectList = selectListContainer.find('.js-address-select');
-        var error = selectListContainer.find('.js-address-error');
+        var error = selectListContainer.find('.js-address-error, .error');
         var resetButton = addressLookupElement.find('.js-reset-address');
         var manualButton = addressLookupElement.find('.js-manual-address');
         var manualAddressContainer = addressLookupElement.find('+ .js-address-entry-container');

js/address_select.js

@@ -44,7 +44,6 @@
   function hideManualAddress(centralHubElement, type, settings) {
     var manualAddressContainer = centralHubElement.find('.js-address-entry-container');
     var manualButton = centralHubElement.find('.js-manual-address');
-    var addressSelectContainer = centralHubElement.find('.js-address-select-container');
     manualAddressContainer.addClass('hidden');
 
     if (type == 'hard') {
@@ -63,24 +62,18 @@
 
   /**
    * Show the manual address form elements.
+   *
    * @param  {jQuery} centralHubElement
    *   Centralhub address element.
    */
   function showManualAddress(centralHubElement) {
     var manualAddressContainer = centralHubElement.find('.js-address-entry-container');
     var manualButton = centralHubElement.find('.js-manual-address');
     var addressSelectContainer = centralHubElement.find('.js-address-select-container');
-    var addressSelect = addressSelectContainer.find('select');
     var searchElement = centralHubElement.find('.js-address-searchstring');
     var addressError = addressSelectContainer.find('.js-address-error');
     manualAddressContainer.removeClass('hidden');
-    // manualAddressContainer.find('input').val('');
     manualButton.hide();
-    // addressSelectContainer.addClass('hidden');
-    // addressSelect.val('0');
-    // Clear the search element when entering a manual address.
-    // This is to pass validation.
-    // searchElement.val('');
     // Remove the error element when making a manual address.
     addressError.remove();
   }
@@ -174,7 +167,6 @@
         central_hub_webform_address_container.find('input.js-localgov-forms-webform-uk-address--' + value).val(addressSelected[value]);
       });
 
-      // hideManualAddress(centralHubElement, 'soft');
       showManualAddress(centralHubElement);
     } else if ($(this).val() == 0) {
       // If choosing the empty option, clear out the address fields.
@@ -211,9 +203,6 @@
           hideManualAddress(centralHubElement, 'soft', settings);
         }
 
-        // centralHubElement.find('.js-address-searchstring').change(function() {
-        //   hideManualAddress(centralHubElement, 'hard');
-        // });
         centralHubElement.find('.js-reset-address').click(function () {
           hideManualAddress(centralHubElement, 'hard', settings);
         });

src/Element/AddressLookupElement.php

@@ -189,7 +189,7 @@ public static function processAddressLookupElement(&$element, FormStateInterface
         $parent_container = $parent_container[$keyval];
       }
 
-      // Extract the parent values form container.
+      // Extract the parent values from container.
       $parent_container_values = $form_values;
       foreach ($parents as $keyval) {
         $parent_container_values = $parent_container_values[$keyval];

src/Element/UKAddressLookup.php

@@ -161,26 +161,36 @@ public static function validateWebformComposite(&$element, FormStateInterface $f
       // Then show an error to search for a local address or select can't find
       // the address.
       if (!empty($search_string) && $element['address_lookup']['address_select']['address_select_list']['#type'] == 'markup') {
-        $form_state->setError($element, t('Search for a local address, or select "Can\'t find the address" to enter an address.'));
+        $form_state->setError($element['address_lookup']['address_search']['address_searchstring'], t('Search for a local address, or select "Can\'t find the address" to enter an address.'));
 
-        // Inline form errors don't work well for this element in this scenario.
+        // Inline form errors don't work well for this element in Ajax calls.
         // This is because the Ajax callback attached to the `Find address`
-        // button updates only part* of the address lookup element.  As a
+        // button updates only *part* of the address lookup element.  As a
         // result, any error set on any other part of the address lookup element
-        // is lost.  To avoid this, we disable inline errors here.
-        $complete_form['#disable_inline_form_errors'] = TRUE;
+        // is lost.  To avoid this, we disable inline errors here.  There is an
+        // assumption here that the `Find address` button is using Ajax.  This
+        // assumption is good enough for most cases but degrades without Ajax.
+        if ($is_address_lookup_op) {
+          $complete_form['#disable_inline_form_errors'] = TRUE;
+        }
       }
       // Else if there is a search but no address selected,
       // set the select box as required.
       elseif (!empty($search_string) && empty($selected) && !$is_address_lookup_op) {
         WebformElementHelper::setRequiredError($element['address_lookup']['address_select']['address_select_list'], $form_state);
+
+        // UI needs a hint that we are in the middle of a search.
+        $element['address_lookup']['address_search']['address_actions']['address_searchbutton']['#attributes']['class'][] = 'js-searching';
       }
       // Else mark the entire element as required.
       elseif (empty($search_string) && empty($selected)) {
         WebformElementHelper::setRequiredError($element['address_lookup']['address_search']['address_searchstring'], $form_state);
 
-        // Inline form errors don't work well in this scenario.
-        $complete_form['#disable_inline_form_errors'] = TRUE;
+        // As explained above, inline form errors don't work well for this
+        // element in Ajax calls.
+        if ($is_address_lookup_op) {
+          $complete_form['#disable_inline_form_errors'] = TRUE;
+        }
       }
 
       // Fetch errors, to allow any generated errors for the child elements
@@ -201,7 +211,7 @@ public static function validateWebformComposite(&$element, FormStateInterface $f
         unset($form_errors[$element_key . '][address_lookup][address_select][address_select_list']);
       }
 
-      // Reset form errors and reset them with the cleaned ones.
+      // Reset form errors and replace them with cleaned ones.
       $form_state->clearErrors();
       foreach ($form_errors as $error_key => $error_value) {
         $form_state->setErrorByName($error_key, $error_value);

tests/src/FunctionalJavascript/AddressLookupErrorMsgTest.php

@@ -70,8 +70,8 @@ public function testRequiredRadio(): void {
   /**
    * Address lookup element should raise error if a required subfield is empty.
    *
-   * - Submits an empty form.  Should bring up error messeges from both the
-   *   radio and address lookup elements.
+   * - Submits an empty form.  Should bring up an error messege from the radio
+   *   element.
    * - Selects a radio that does not bring up the address lookup element.  Then
    *   submits form.  Should not bring up any error messages because address
    *   lookup element is hidden.