mouse click not selecting data.

[cb49747]

Hello I have this code. the form has a ajax function that runs when a field is changed. The problem I have is this doesn't work when I click on suggested locations with my mouse. If I highlight them with the keyboard and hit enter it works. If I click on it with the mouse and then hit the submit button it works. but it seems as if the onchange runs before the value is stored, but only when selected with a mouse.

Any ideas what could be causing this?

    $(document).ready(function() {
        $('#location-quicksearch').typeahead({
            items: 20,
            minLength: 3,
            updater: function(item) { return item; },
            matcher: function ( item ) {return true;},
            menu: '<ul class="typeahead dropdown-menu"></ul>',
            //highlighter: function (item) {return item;},
            source: function (query, process) {
               $.ajax({
                    url: '/ajax_rq.smpl?fn=jb_location_typeahead',
                    type: 'GET',
                    data: { v: query, 
                            pid: 'gwt',
                            h: '###hash###',
                            t: '###hash_time###'
                           },
                    dataType: 'json',
                    success: function(json) {
                        return process(json.list)
                    }
                });
            }
        });
    });

the html

<div class="form-group" id="jb_location_typeahead">
    <label for="location-quicksearch" class="!!!CLASS!!!">Location</label>
    <div class="input-group">
        <div class="input-group-addon"><i class="jbfa jbfa-map-marker" aria-hidden="true"></i></div>
        <input type="text" name="location" id="location-quicksearch" value="" placeholder="enter city or zip/postal code" class="form-control" autocomplete="off">
    </div>
</div>

[adatta02]

I can confirm that this is happening. It's being caused by this event handler - https://github.com/bassjobsen/Bootstrap-3-Typeahead/blob/master/bootstrap3-typeahead.js#L512

I'm not 100% clear on the implications of removing it...

[ventil8]

I am having the same issue...did anyone get a way round this? with BS2 you simple had to click on the item in the drop down...

[lsg1]

I also have this same issue...is there a resolution?

[adatta02]

@lsg1 I think https://github.com/bassjobsen/Bootstrap-3-Typeahead/issues/282 fixes it on master

[lsg1]

It does not fix it for me. I downloaded the latest code today, so my code does not have those 3 lines that were removed in #282. The mouse click still does not select my choice.

From: Ashish Datta [mailto:[email protected]] Sent: Wednesday, May 03, 2017 10:50 AM To: bassjobsen/Bootstrap-3-Typeahead Cc: Laura Grella; Mention Subject: Re: [bassjobsen/Bootstrap-3-Typeahead] mouse click not selecting data. (#248)

@lsg1https://github.com/lsg1 I think #282https://github.com/bassjobsen/Bootstrap-3-Typeahead/issues/282 fixes it on master

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHubhttps://github.com/bassjobsen/Bootstrap-3-Typeahead/issues/248#issuecomment-298933968, or mute the threadhttps://github.com/notifications/unsubscribe-auth/AMiDFkxy2xDOInEI7BoVUIAGgh34JuUxks5r2JP7gaJpZM4KLXaD.

[lsg1]

@adatta02 have you tried it with the fix from #282?

This is the code I have which does not work on mouseclick: ` listen: function () { this.$element .on('focus', $.proxy(this.focus, this)) .on('blur', $.proxy(this.blur, this)) .on('keypress', $.proxy(this.keypress, this)) .on('propertychange input', $.proxy(this.input, this)) .on('keyup', $.proxy(this.keyup, this));

  if (this.eventSupported('keydown')) {
    this.$element.on('keydown', $.proxy(this.keydown, this));
  }

  this.$menu.on('click', $.proxy(this.click, this));
},`

If I add back the lines removed from the fix from #282, the mouse click works

[adatta02]

Do you have a codepen somewhere? I ended up just removing whatever handler wasn't working properly but that was on an older version so not sure if it still works.

[lsg1]

No, I don't have any codepen.....When i reverted the code back to the change before #282 it works fine. I don't have the issue that #282 is referring to.

[aaronlna]

+1 Pulling a version pre-#282 resolved the issue. It definitely seems whatever fix this was broke any mouseclick event handlers.

[solisarg]

Looking at the code in my case the error is because I have a touch screen in my pc, so here the first block executes while the second is expected:

if ('ontouchstart' in document.documentElement) { this.$menu .on('touchstart', 'li', $.proxy(this.touchstart, this)) .on('touchend', 'li', $.proxy(this.click, this)); } else { this.$menu .on('click', $.proxy(this.click, this)) .on('mouseenter', 'li', $.proxy(this.mouseenter, this)) .on('mouseleave', 'li', $.proxy(this.mouseleave, this)) .on('mousedown', $.proxy(this.mousedown,this)); }

I just comment the first part, if you want to run the code on touch devices (not my case) you need to add extra check to be sure in wich device you're running the code

[rvaandrager]

I have looked into this, and analysed the code snippet mentioned by @solisarg. The problem occurs only on a device with both a touch screen and a physical mouse and keyboard. In that case, only touchstart and touchend events are added, whereas click and mouse events are not added. That explains why mouse events are not handled on such a device.

For me, the solution was to ditch the else statement. The code snippet then becoms this:

if ('ontouchstart' in document.documentElement) {
  this.$menu
    .on('touchstart', 'li', $.proxy(this.touchstart, this))
    .on('touchend', 'li', $.proxy(this.click, this));
}
this.$menu
  .on('click', $.proxy(this.click, this))
  .on('mouseenter', 'li', $.proxy(this.mouseenter, this))
  .on('mouseleave', 'li', $.proxy(this.mouseleave, this))
  .on('mousedown', $.proxy(this.mousedown,this));

Because of this change, the click and mouse events will always be handled. On a touch only device, there is no mouse, so the events will never be triggered. This will also work for an Android phone with a physical mouse attached :)

[tedxas]

Confirming the findings of @rvaandrager, we are seeing this behavior on three of our touchscreen-enabled PCs. The proposed remedy alleviates the problem, too.