Autoselect on blur

[markudevelop]

When using the autoselect: true, it indicates that it's selecting the first suggestion, what I saw that on mobile (iOS, Safari) clicking done doesn't trigger the "Enter" event so it's doesn't select it. In android I noticed that after you see the indication that it's selected users just switch to next input.

So I really needed a way to select it on blur, I've created new option "autoselectOnBlur" very simple, could I push this as a PR? Will be nice to keep it in the code base if it's useful for others as well and easier to maintain version updates for me.

[redox]

Hey @voidale,

I would love to review such a PR, go ahead 👍

[Pab89]

I set the autoselectOnBlur to true, and now it selects an input on (iOs safari) on touch, but one major problem is no matter what you click it always selects the first input? So if theres 3 suggestions and you click suggestion 2 it's still suggestions 1 thats selected. No i need more options for it to work properly or is it a general issue?

[redox]

I set the autoselectOnBlur to true, and now it selects an input on (iOs safari) on touch, but one major problem is no matter what you click it always selects the first input? So if theres 3 suggestions and you click suggestion 2 it's still suggestions 1 thats selected. No i need more options for it to work properly or is it a general issue?

Should not need anything else. I need to reproduce the bug locally, maybe it's an issue with Safari.

[Pab89]

try to visit https://iclaimer.com/iframe/claim-form/da/flyhjaelp-dk on "iphone" and try the first autoselect box out then you can see the issue.

[Pab89]

The code used is

            let client = algoliasearch("xxxx", 'xxxxx');
            let index = client.initIndex(this.index);

            let searchOptions = { hitsPerPage: 6, filters: 'company_id = '+this.companyId };
            let iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
            if( iOS )
                searchOptions = { hitsPerPage: 6, filters: 'company_id = '+this.companyId };

            let search = autocomplete('#'+this.id, {hint: true, autoselectOnBlur: true}, [
                {
                    source: autocomplete.sources.hits(index, searchOptions),
                    displayKey: 'name',
                    templates: {
                        header: '<div class="aa-headline">'+this.headline+'</div>',
                        suggestion: (suggestion) => {
                            let suggestionTemplate = (this.suggestionTemplate) ? this.suggestionTemplate : 'nameTemplate';
                            return this.suggestionTemplates()[suggestionTemplate](suggestion);
                        }
                    }
                }
            ]);

            search.on('autocomplete:selected',(event,suggestion,dataset) => {
                this.lastSelectedValue = suggestion.name;
                this.submitValue = suggestion.id;
            });

            //A normal change means there is hit and therefor no id
            search.on('change',(e) => {

                if(this.$data.lastSelectedValue != $(e.currentTarget).val())
                    this.submitValue = '';
            });

[redox]

try to visit https://iclaimer.com/iframe/claim-form/da/flyhjaelp-dk on "iphone" and try the first autoselect box out then you can see the issue.

Indeed, I reproduce the issue on iOS Safari; I'll need to check if we can fix that :/

[Pab89]

@redox Thanks for the fast reply, it's kinda a major issue for us right now, as 60% of our customers use mobile devices to browse our site, and will depend upon if we can continue to use the service. Any idea, when i might hear back from you, so that i know if we need to look into other solutions?

[vvo]

Hey guys sorry but I did push an update to solve this, see https://github.com/algolia/autocomplete.js#options. And now this is broken somehow?

[Pab89]

Not sure what i am looking for? Have you send the correct link ?

[vvo]

@Pab89 Sorry, what I wanted to say is that autoselectOnBlur what released. If I understand well you know that, you tried to use it, but it's broken.

[vvo]

@voidale You did the change to autoselectOnBlur, can you help @Pab89 here maybe? Thanks!

[Pab89]

@vvo Ye that is correct, i been using it to fix the problem on the iphone where nothing was selected when touched/tapped. Which autoSelectOnBlut fixed in the way that only the first hit can be selected. So still need to able to chose hits 2,3,4.. etc for it to work properly. Looking forward to a fix for this problem, as we else will need to look elsewhere for a solution that works on mobile to

[redox]

@voidale You did the change to autoselectOnBlur, can you help @Pab89 here maybe? Thanks!

@vvo I tested it on iOS Safari and successfully reproduced the issue; I think it's more a "touch" VS "click" bug; and the autoSelectOnBlur impacts the behavior.

[Pab89]

Hey, anything new here? We are in situation where we soon will need to know if we can get this script to work or need to look for another solution as this is the last fix we are waiting for before we can push our new form to production.

[markudevelop]

@Pab89 Hey, I will take a look into this, will update soon.
Edit: I can confirm the bug will work on fixing it, thanks for reporting!
Edit2: Fixed, will push PR now.

[Pab89]

Cool thanks, i look forward for the push to be accepted. :)

[vvo]

Fix gonna be released today

[Pab89]

Seems to me that the error still exists after the PR ? Just tryed the new 2.2.1 .min file. See https://iclaimer.com/iframe/claim-form/da/flyhjaelp-dk

[Pab89]

Im using safari IOS, iphone 6S

[vvo]

Saw that, it's clearly not working. Basically autocomplete.js is failing on mobile, we need to investigate deeper. Can you open a new issue so we close this one? Thanks

[markudevelop]

I tested it and it works on my side: https://www.flightscanner.org
(iPhone 4s safari + android native browser both had the issue before)

[Pab89]

Thanks, any change you can send me a snippet of the code you use to implement it? Then i can try to find the difference between my and your code my self.

[markudevelop]

@Pab89 hey, here is what I have:

    $input.autocomplete({
      autoselect: true,
      autoselectOnBlur: true,
      minLength: 2,
      // debug: true,
      cssClasses: {
        root: 'fs-airport-search',
        prefix: 'fs',
        dropdownMenu: 'menu',
        input: 'bar',
        hint: 'clue',
        suggestions: 'list',
        suggestion: 'item',
        cursor: 'pointer',
        dataset: 'resultset'
      },
    },
    {
      displayKey: 'display',
      source: _.debounce(callApi, 300),
      templates: {
        empty: function(data) {
          return '<div class="fs-empty-item no-results">No results for "<strong>' + data.query.replace(/[^-_'a-zA-Z0-9 ]/, ' ') + '</strong>"</div>';
        },
        suggestion: function (suggestion, answer) {
          let airplaneIcon = '<i class="autocomplete-plane">&nbsp;</i>';
          if (suggestion.type === 'airport') {
            return `<span class="airport">${airplaneIcon + suggestion.highlighted}</span>`;
          } else {
            return suggestion.highlighted;
            // return `<span class="city">${cityIcon + suggestion.highlighted}</span>`;
          }
        }
      }
    }).on('autocomplete:selected', (event, value) => {
      if (!value) {
        return console.log('autocomplete:selected no value');
      }
      // focus out from the input
      event.target.blur();

      let selected = this.props.selected;
      if (selected && selected === value) return;

      this.props.onChange(value);

      let fromTo = this.props.name;
      let action = 'select_'+fromTo;
      let airportOrCityId = value.id;
      ga('send', 'event', 'airport_search', action, airportOrCityId);
    }).on('autocomplete:empty', function () {
      console.log('empty called cb');
    });