Using my mouse to select an option from the Places Library's Autocomplete Feature adds random locations to the Location text field on the form.

Using my keyboard to arrow down the autocomplete list and hitting the enter key to make my selection works everytime.

Using my keyboard to arrow down the list displays the focus list item with red map icon. Mouse hover effect does not change the map icon to red but does change the background so it does fire hover event.

If I arrow down the list, then click on the red map icon item with my mouse it works too.

I tried different themes with the same results.

There seems to be multiple events fire on selection, because the selected autocomplete item is added to the text box for a split second, then it seems to run again and changes the selection.

EDIT: I found the culprit, commenting out the following code in webform.element.location.js resolved the issue for me. I am uncertain what I've lost by doing so, but I can now click on an autocomplete list item with my mouse and the location it adds to the text box doesn't randomly change to another location.

        $geocomplete.on('input', function () {
          // Reset attributes on input.
          $element.find('[data-webform-location-attribute]').val('');
        }).on('blur', function () {
          // Make sure to get attributes on blur.
          if ($element.find('[data-webform-location-attribute="location"]').val() === '') {
            var value = $geocomplete.val();
            if (value) {
              $geocomplete.geocomplete('find', value);
            }
          }
        });

EDIT 2: Narrowed it down further to the on blur event by separating the above into separate calls.

EDIT 3: So I see that the hidden input types are not being updated on the fly with the above code removed (when changes are made to the location field). However, it seems the location values are upon submit, so I think that works for my purposes because I am not showing those hidden values on the form.

Comments

buddym created an issue. See original summary.

buddym’s picture

Issue summary: View changes
buddym’s picture

Issue summary: View changes
buddym’s picture

Issue summary: View changes
jrockowitz’s picture

@buddym Can you please provide a patch or at least the updated file.

buddym’s picture

@jrockowitz The updated file is listed below and seems to be working for me thus far. I tested it on Windows 7, both Firefox and IE 11 as well as my Android Phone's Firefox.

I am not sure what functionality is lost from these modifications, so please beware. What I gained from these changes, at least from the renditions I put the form through, is the ability to select autocomplete places with my mouse without the location field changing the place after my selection.

In the attached file you will find that I modified this line

$(context).find('div.js-form-type-webform-location').once('webform-location').each(function () {

to

$(context).find('div.js-form-type-webform-location').each(function () {

and commented out this code

        $geocomplete.on('input', function () {
          // Reset attributes on input.
          $element.find('[data-webform-location-attribute]').val('');
        }).on('blur', function () {
          // Make sure to get attributes on blur.
          if ($element.find('[data-webform-location-attribute="location"]').val() === '') {
            var value = $geocomplete.val();
            if (value) {
              $geocomplete.geocomplete('find', value);
            }
          }
        });

Updated webform.element.location.js file:

/**
 * @file
 * JavaScript behaviors for Geocomplete location integration.
 */

(function ($, Drupal, drupalSettings) {

  'use strict';

  // @see https://ubilabs.github.io/geocomplete/
  // @see https://developers.google.com/maps/documentation/javascript/reference?csw=1#MapOptions
  Drupal.webform = Drupal.webform || {};
  Drupal.webform.locationGeocomplete = Drupal.webform.locationGeocomplete || {};
  Drupal.webform.locationGeocomplete.options = Drupal.webform.locationGeocomplete.options || {};

  /**
   * Initialize location Geocompletion.
   *
   * @type {Drupal~behavior}
   */
  Drupal.behaviors.webformLocationGeocomplete = {
    attach: function (context) {
      if (!$.fn.geocomplete) {
        return;
      }

      $(context).find('div.js-form-type-webform-location').each(function () {
        var $element = $(this);
        var $input = $element.find('.webform-location-geocomplete');
        var $map = null;
        if ($input.attr('data-webform-location-map')) {
          $map = $('<div class="webform-location-map"><div class="webform-location-map--container"></div></div>').insertAfter($input).find('.webform-location-map--container');
        }

        var options = $.extend({
          details: $element,
          detailsAttribute: 'data-webform-location-attribute',
          types: ['geocode'],
          map: $map,
          mapOptions: {
            disableDefaultUI: true,
            zoomControl: true
          }
        }, Drupal.webform.locationGeocomplete.options);

        var $geocomplete = $input.geocomplete(options);
		
		/*
        $geocomplete.on('input', function () {
          // Reset attributes on input.
          $element.find('[data-webform-location-attribute]').val('');
        }).on('blur', function () {
          // Make sure to get attributes on blur.
          if ($element.find('[data-webform-location-attribute="location"]').val() === '') {
            var value = $geocomplete.val();
            if (value) {
              $geocomplete.geocomplete('find', value);
            }
          }
        });
		*/
		
        // If there is default value look up location's attributes, else see if
        // the default value should be set to the browser's current geolocation.
        var value = $geocomplete.val();
        if (value) {
          $geocomplete.geocomplete('find', value);
        }
        else if (navigator.geolocation && $geocomplete.attr('data-webform-location-geolocation')) {
          navigator.geolocation.getCurrentPosition(function (position) {
            $geocomplete.geocomplete('find', position.coords.latitude + ', ' + position.coords.longitude);
          });
        }
      });
    }
  };

})(jQuery, Drupal, drupalSettings);

jrockowitz’s picture

StatusFileSize
new1.96 KB

Attached is a patch based on changes. Right now, I am not sure what functionality is being lost by your changes. I will look into it.

jrockowitz’s picture

Status: Active » Postponed (maintainer needs more info)
jrockowitz’s picture

Status: Postponed (maintainer needs more info) » Closed (cannot reproduce)
dscl’s picture

Title: Location Field Type Google MAP API Places Library Autocomplete Events » Location field selects a random address when clicking an autocomplete suggestion
Status: Closed (cannot reproduce) » Needs work

Hey there,

I'm reopening this before the issue is still present in the 8.x-5.0-rc10 and probably on -dev.

The easiest way to reproduce is to start typing any number which will cause the autocomplete to trigger, then click in any of the results shown.
It doesn't happen 100% of the time, I would say 80%, which is huge IMHO.

Applying the patch that removes the whole JS code related to the blur event makes it stop, completely. And I still see the hidden fields getting populated when I change the focus away from the Location field.
As far as me and my team tested, there was no side effect on taking that JS out.

I would mark it as RTBC, but the patch needs work as the JS should be removed and not just commented.

Cheers!

dscl’s picture

Status: Needs work » Needs review
StatusFileSize
new976 bytes

Hey there,

Like I said before, the issue still exists and the patch works.
But since we need the JS code to be removed instead of just commenting it out, here is a new version of the patch.

Cheers!

jrockowitz’s picture

The JS is trying to sync the location's meta data with any manually entered value.

Taking out these event handlers makes it possible for an invalid location to be submitted.

I am not sure what the best solution is going to be.

jrockowitz’s picture

StatusFileSize
new1.34 KB

I think this is an issue with $geocomplete() plugin.

clicking on the auto suggested address is populating different address #317

The attached patch tries the suggestion in https://github.com/ubilabs/geocomplete/issues/119

dscl’s picture

Status: Needs review » Reviewed & tested by the community

Now it makes sense, yeah. I didn't notice that was the part of the functionality that we were losing.

Your patch works for both scenarios.

It is a bit annoying because I wasn't really able to leave the field empty after filling it up once, but if it is an issue, it should be another ticket. :)

Cheers!

jrockowitz’s picture

I am hoping someone else can review the patch or I will do another round of manual testing.

  • jrockowitz committed a319eb5 on 8.x-5.x
    Issue #2900489 by jrockowitz, dscl: Location field selects a random...
jrockowitz’s picture

Status: Reviewed & tested by the community » Fixed

@dscl I re-reviewed the patch and the auto-population is working fine without any unpredictable results.

I committed the patch. Thanks for the help.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.

buddym’s picture

I just installed 8.x-5.0-rc15 and using the mouse to select a location value from the autofill option list is still returning random results.

https://ask.albanyny.gov/form/emergency-no-parking-v3

I changed the blur option from true to false on line 40 of webform.element.location.js. This kept the map marker and I didn't get random selections when using my mouse.

olivier.br’s picture

StatusFileSize
new468 bytes

same as #19