Chosen: Chosen on Ipad scroll problem single select en click problem multiple select

Created on 28 Mar 2015  ·  41Comments  ·  Source: harvesthq/chosen

The recent fix:

2119 Fix touch event propagation

seems to breaks other functionality of chosen on Ipad (tested in Ipad 3, latest version chosen).
Problems:

  • single select: scroll of dropdown list does not work any more
  • multiple select: removing selected items is impossible and after the first time a click in the select window does not show the drop down list
    These problems can be reproduced using an Ipad on the standard chosen test site: http://harvesthq.github.io/chosen/ on the Standard select and Multiple select examples.
    They probably have to do with the #2119 Fix as the functionality was ok before.
Bug Has Solution

Most helpful comment

Im experiencing the same issue. I managed to find a work around, which involves commenting out the evt.preventDefault() on touchstart.chosen that was implemented with #2119

      this.container.bind('touchstart.chosen', function(evt) {
        _this.container_mousedown(evt);
        //return evt.preventDefault();
      });
      this.container.bind('touchend.chosen', function(evt) {
        _this.container_mouseup(evt);
        return evt.preventDefault();
      });

All 41 comments

I am also experiencing the issue @donthebike is seeing.

Same here

Same problem here. Both on IOS and Android. Any ETA on a fix?
Thanks.

Also seeing this issue.

Same issue here regarding the deselect icon (the cross) not working to remove selected options on touch devices. The backspace key does still work to remove options though.

I have tested before / after the #2119 fix (using git bisect) to confirm that the issue was introduced by that commit. Tested on Safari and Chrome on iPad, and also Chrome on Android tablet.

Same issue as @AmirS2. But it did fix the click event when the screen scrolls while the dropdown opens.

Same issue.

I was having the same issue plus a selecting issue on Android. I just went ahead and removed all touch events as an easy fix. Everything works for both Android and iOS except that when an option is selected it isn't initially highlighted on mobile devices. I am just using the single select though. I'm also not very experienced with touch events so I'm not sure if there was a specific reason they were used in this case?

Same issue here. Disabling all touch-events fixes the issue as @nlaitchison said. But I don't think this is a permanent fix. Any thoughts on this?

Im experiencing the same issue. I managed to find a work around, which involves commenting out the evt.preventDefault() on touchstart.chosen that was implemented with #2119

      this.container.bind('touchstart.chosen', function(evt) {
        _this.container_mousedown(evt);
        //return evt.preventDefault();
      });
      this.container.bind('touchend.chosen', function(evt) {
        _this.container_mouseup(evt);
        return evt.preventDefault();
      });

I also seeing this issue. Very annoying for mobile users.

Dear @vbanuelos, your workaround did not fix the issue for me. What version do you use ? 1.4.2 ?

@ptrussart -- that's correct. V 1.4.2

Just thought I'd throw in my two cents! This is an issue for me also. My workaround was to just disable chosen on iPads, which you can do by changing line 532 of the jquery file from

      if (/iP(od|hone)/i.test(window.navigator.userAgent)) {
        return false;
      }

to

      if (/iP(od|ad|hone)/i.test(window.navigator.userAgent)) {
        return false;
      }

Have the same scrolling issue, fix from @vbanuelos helped me, thanks!

+1 fix from @vbanuelos . Thanks a lot. Tested on Safari and Chrome under iOS8.3 on a single select list.

fix from @vbanuelos helped me, thanks!

Yes! +1 fix from @vbanuelos

Will this fix be re-merged or is there something blocking?

Will this fix be re-merged or is there something blocking?

Something new about this?

@ptrussart -- It appears my workaround is working for most. Perhaps it can be implemented in the latest release?

Right now hard coded though. :(

Just got a colleague who had to hard to code the preventDefault() workaround mentioned above.

Is there a problem with this? I see a commit removing the line and a commit reverting the removal.

Thanks a lot.

@vbanuelos That's great

Replace line 1004 in file chosen.jquery.js
close_link.bind('click.chosen', function(evt) {
by
close_link.bind('touchstart.chosen click.chosen', function(evt) {

@josemigueldel85 this might be a stupid question, but where is the quick fix for mobile touch support intended to be put in? I'm talking about the below from your post above.

// Chosen touch support.
    if ($('.chosen-container').length > 0) {
      $('.chosen-container').on('touchstart', function(e){
        e.stopPropagation(); e.preventDefault();
        // Trigger the mousedown event.
        $(this).trigger('mousedown');
      });
    }

Download the file Attachment in the web page. http://realize.be/mobile-support-chosen

chosen.jquery.min_.js.txt

This problem not only occurs on iPad, but also on Android tablets.

Also, deleting options is still possible using backspace

the fix works, but is applied to the 1.1 chosen file version... any ways to have the latest version patched? or let us know what's been modified in it? thanks

@vbanuelos using this approach on v1.6.1, works fine on ipad (chrome simulator), do you know any consequences of this approach.

I am having the same issue. Is there a way to add @vbanuelos approach without editing the source file? Like a hack that we can add to our own site's script instead of editing the chosen.min.js file directly? I have this issue on ipad where chosen is not scrollable even with current version.

I see the chosen gets disabled in mobile phone but its not disabled in iPad. I think it will help if we can disable chosen in iPads and tablets altogether just like mobiles. Is there a way to do this?

Hi everyone,

I'm experiencing this issue and I'm looking for a real fix.

Did you fixed it in any version? Do you have an ETA ?

Should I upgrade chosen library?

@harvesthq/chosen-developers

Thanks per advance

my fix worked for multi-select but it is disturbing single chosen select by
not letting them work in first click, then when you click second time the
select box works, so here is one of the pros and cons,

seems like problems only no solutions

On Tue, Feb 28, 2017 at 12:21 AM, Virgile notifications@github.com wrote:

Hi everyone,

I'm experiencing this issue and I'm looking for a real fix.

Did you fixed it in any version? Do you have an ETA ?

Should I upgrade chosen library?

@harvesthq/chosen-developers

Thanks per advance


You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/harvesthq/chosen/issues/2289#issuecomment-282812806,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AOb86iHEa_PhLl66NKAS_lFpi6MAJv9Yks5rgxsVgaJpZM4D2bZd
.

Sounds like this was fixed in master in October - #2725 (referenced above 9 Oct 2016). Or are you testing against master (and this fix) and it's still an issue?
There has yet to be a new release, but you can install the master version through bower with
bower install https://github.com/harvesthq/chosen-package.git#master --save
[ don't use bower install https://github.com/harvesthq/chosen.git#master --save as this is not the bower friendly repo, i.e. does not contain the generated js, css, etc files.]
(if you already have version 1.6.2 installed it'll give you an option to overwrite the installed version). Not ideal, as every future bower install will get the very latest version, but an option for now.

I have done what @mcjwb recommended and used the master version. I typically use whatever is hosted on cdnjs.com, but that is broken still too. I will keep an eye for this to get fixed.

Just released Chosen 1.7.0 which includes #2725

Great, sorted everything for me. Thank you very much.

  • single select: scroll of dropdown list does not work any more

Confirmed - fixed.

  • multiple select: removing selected items is impossible

Still not fixed (chosen 1.7.0)

Thanks @snakexxx

Replace line 1004 in file chosen.jquery.js
close_link.bind('click.chosen', function(evt) {
by
close_link.bind('touchstart.chosen click.chosen', function(evt) {

replace all your'click.chosen' events with 'touchstart.chosen click.chosen'

Was this page helpful?
0 / 5 - 0 ratings

Related issues

raggzy picture raggzy  ·  5Comments

mcclurem picture mcclurem  ·  4Comments

engintekin picture engintekin  ·  8Comments

vpode picture vpode  ·  5Comments

Scalamoosh picture Scalamoosh  ·  8Comments