Chosen plugin doesn't seem to work on mobile browsers

Question

I have set up a Chosen plugin for a select field for the user to be able to type-search from a long list.

Although I am developing this for mobile phones and while it works fine on computer, it is disabled on both Apple and Android phones and the default user interface pops up for the select input.

I'd like to use the plugin on phones.

As far as the documentation suggests (well the notes on github), it doesn't support mobile devices. You should take that up with the developers, and find out what their plans are / develop it to work on mobile yourself. — Rob Baillie, Feb 25 '14 at 14:11
If this question is still valid try this chosen fork, this works on mobiles - https://github.com/rafalenden/chosen — Bhargav Nanekalva, Feb 25 '15 at 06:05

score 37 · Accepted Answer · edited Feb 24 '15 at 20:32

37

Before using any plugin, try checking its scope.

Chosen is not supported on android or IOS, "Chosen is disabled on iPhone, iPod Touch, and Android mobile devices "

Check Official CHOSEN link here

edited Feb 24 '15 at 20:32

Bhargav Nanekalva

606
9
31

answered Feb 25 '14 at 14:14

dreamweiver

6,002
2
24
39

It works on iOS8 in Safari if you explicitly request the desktop version of the site. Proof: http://shrani.si/f/2Z/4J/1IJOfa4Z/img4117.png – Klemen Tusar Oct 15 '14 at 13:03
@techouse: may be thats a workaround, but i dont think its official recommended for android or iOS. – dreamweiver Oct 15 '14 at 14:18
1

Well apparently the new Safari on iOS8 has the capabilities to run it. All that requesting the desktop version of the site does is change the useragent string from "Mozilla/5.0 (iPhone; CPU iPhone OS 8_0_2 like Mac OS X) AppleWebKit/600.1.4 (KHTML, like Gecko) Version/8.0 Mobile/12A405 Safari/600.1.4" to "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10) AppleWebKit/538.44 (KHTML, like Gecko) Version/8.0 Safari/538.44" which seems to bypass Chosen's disabled browser detection – Klemen Tusar Oct 16 '14 at 03:41
1

@techouse: hmm in that case it may induce some unknown issues in later stages, since it is not handled in chosen plugin :D. anyway nice catch. – dreamweiver Oct 16 '14 at 06:44
4

[selectize](http://brianreavis.github.io/selectize.js/) is alternative that works on mobile – Maxim Yefremov Oct 31 '14 at 02:35
1

find this function in chosen.js `AbstractChosen.browser_is_supported` and comment out `if (/iP(od|hone)/i.test(window.navigator.userAgent)) { return false; } if (/Android/i.test(window.navigator.userAgent)) { if (/Mobile/i.test(window.navigator.userAgent)) { return false; } }` – PGill Dec 17 '14 at 19:46
1

well that may fix the problem at entry level, because even though ur trying to bypass the compatibility check of chosen library, some of the functions of chosen may not work on those browsers. never try to alter the libraries behaviour unless ur 100% sure of what ur doing . – dreamweiver Dec 18 '14 at 08:46

score 21 · Answer 2 · edited Sep 08 '16 at 02:48

Function browser_is_supported in chosen.jquery.js illustrates that it deliberately avoids activating on Android and iPhone platform (because of several UX issues). But you can hack it by yourself.

 AbstractChosen.browser_is_supported = function() {
  if (window.navigator.appName === "Microsoft Internet Explorer") {
    return document.documentMode >= 8;
  }
  if (/iP(od|hone)/i.test(window.navigator.userAgent)) {
    return false;
  }
  if (/Android/i.test(window.navigator.userAgent)) {
    if (/Mobile/i.test(window.navigator.userAgent)) {
      return false;
    }
  }
  return true;
};

score 17 · Answer 3 · edited Sep 08 '16 at 02:46

17

AbstractChosen.browser_is_supported function does not allow you to use this plugin on mobile devices and internet explorer so you can hack this by yourself.

Find the below lines in chosen.jquery.js and comment this code. Now the chosen plugin will work on mobile devices.

if (!AbstractChosen.browser_is_supported()) {
    return this;
}   
if (!AbstractChosen.browser_is_supported()) {
    return;  
}

edited Sep 08 '16 at 02:46

Simon East

55,742
17
139
133

answered Oct 19 '15 at 08:10

Muhammad Waqas

1,140
12
20

2

Great. It's worked ! Thanks a lot. – Sumith Harshan Mar 09 '18 at 07:07
2

Thank you so much for your great help. Really appreciated. – Ravi Pitroda Feb 25 '19 at 06:22
This does works but it makes me click 2 times on select to show it. .. First time it opens and closes+opens keyboard and second time all works. Any solution to make it work on first click? – Ingus Feb 17 '20 at 14:48

score 6 · Answer 4 · answered Apr 22 '17 at 07:37

6

For me it was this line:

        }, AbstractChosen.browser_is_supported = function() {
            return "Microsoft Internet Explorer" === window.navigator.appName ? document.documentMode >= 8 : /iP(od|hone)/i.test(window.navigator.userAgent) ? !1 : /Android/i.test(window.navigator.userAgent) && /Mobile/i.test(window.navigator.userAgent) ? !1 : !0
        }

changed to that and it worked like a charm.

}, AbstractChosen.browser_is_supported = function() {          
return true;
}

answered Apr 22 '17 at 07:37

Onur Özgüzel

61
1
1

This answer woked for me.. – NightOwl Mar 27 '19 at 10:47
After you change this file, how do you commit to production? – tomb May 13 '19 at 01:09

score 5 · Answer 5 · answered Jun 03 '16 at 07:55

to disabled in tablet mobile

 AbstractChosen.browser_is_supported = function () {
        if (window.navigator.appName === "Microsoft Internet Explorer") {
            return document.documentMode >= 8;
        }
        //if (/iP(od|hone)/i.test(window.navigator.userAgent))
        if ((/iPhone|iPod|iPad|Android|android|playbook|silk|BlackBerry/).test(navigator.userAgent)) 
        {
            return false;
        }
        if (/Android/i.test(window.navigator.userAgent)) {
            if (/Mobile/i.test(window.navigator.userAgent)) {
                return false;
            }
        }
        return true;
    };

carmat · Answer 6 · 2017-04-26T15:45:39.863

Posting here as a fallback I've implemented as I was depending on the ChosenJS plugin to work so that custom CSS could be applied. Hopefully this helps someone else.

Disclaimer: The answer above by @dreamweiver should still be the accepted answer, given the question.

var chosenSelects = $('.ui-select').find('.chosen-select, [chosen]'),
    $select, $option;

if (chosenSelects) {
    chosenSelects.chosen();

    // Check for 'chosen' elements on mobile devices
    // -----
    // Given that ChosenJS has expressly been disabled from running
    // on mobile browsers, the styles have to be applied manually.
    // Source: https://github.com/harvesthq/chosen/pull/1388
    // -----
    // The code below gathers all 'chosen' selectors and adds
    // 'chosen-mobile' as a className. This className is then
    // used to apply the necessary styles for mobile browsers.
    // Within each select, if an 'option' has an empty value,
    // then that value will be given 'selected' and 'disabled'
    // attributes to act as a placeholder, adopting the text
    // in the 'data-placeholder' as the text to be displayed.
    if ( /iP(od|hone)/i.test(window.navigator.userAgent)
        || (/Android/i.test(window.navigator.userAgent) && /Mobile/i.test(window.navigator.userAgent)) ) {
        chosenSelects.each(function () {
            $select = $(this);
            $select.addClass('chosen-mobile');

            $select.find('option').each(function () {
                $option = $(this);

                if ( $option.val() == '' ) {
                    $option
                        .attr('selected', 'selected')
                        .attr('disabled', 'disabled')
                        .text( $select.data('placeholder') );
                }
            });
        });
    }
}

With this, I then use .ui-select .chosen-mobile to apply the CSS necessary.

Chosen plugin doesn't seem to work on mobile browsers

6 Answers6

Linked

Related