Mobile support for chosen
Note: this patch is quite old, so be aware there might be errors on the latest version on chosen.
Chosen is a jQuery plugin which makes select boxes more user-friendly. Currently, support is disabled on mobile devices for various reasons. Enabling the support requires a hack in the source code for now in the AbstractChosen.browser_is_supported function to return true when the userAgent finds Android or iPhone/iPad. You can download the patched version at the bottom (or detail) of the article. The current version is 1.1.0
Chosen will now be enabled on mobile, but touching the element will not work nicely since the plugin doesn't listen for the touchstart event to trigger the functionality. Opening the select box requires touching the element for at least a couple of seconds, which isn't really user-friendly. Luckily, there's an easy way to get around this by writing a couple lines of javascript:
// 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');
});
}That's it, fully functional chosen support on mobile devices!
| Attachment | Size |
|---|---|
| chosen.jquery.min_.js.txt | 26.33 KB |
Comments
Andrey on Thu, 22/03/2018 - 16:13
Thank god he created you! I spend 4 hours trying solve this problem!
saeed mohseni on Sun, 03/06/2018 - 10:03
Thank You so much...
Chris on Thu, 07/06/2018 - 11:07
Do you know how to make this work for version 1.2?
I think that those lines of code is what I am looking for.
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}
How to enable the mobile support?
Thank you.
Iliyan on Thu, 07/06/2018 - 11:49
Thank you !
Krish karthick R on Thu, 05/07/2018 - 08:19
Thanks It S very Useful for me.....
Akshay on Mon, 24/09/2018 - 00:26
Thanks a lot!!!
It works very well.
Juliano Rodrigues on Tue, 06/11/2018 - 21:38
I'm forking the project and I'm trying to build a new version because this came from bower components in my project. We're anyone able to build from a fork project?
cristian on Wed, 02/01/2019 - 20:40
Genio!
robert on Wed, 30/01/2019 - 17:44
I noticed that on mobile
1. there is no way to remove via search-choice-close if the chosen container is not active (dropdown open)
2. You can't add/select the second item. You need to click outside and then click again on the chosen container.
saunia kz on Wed, 28/08/2019 - 06:24
Thanks a lot
Hugo Lignier on Mon, 30/09/2019 - 16:39
Hello,
I do not know if the support is still active but I use one of the latest version of GravityForm and unfortunately this script does not work: /
Do you know how to do it ?
Thanks!
Bhavin Shah on Thu, 24/10/2019 - 11:56
Your hack is superb and it works excellent if I work on the version 1.1.0. Chosen has progressed and now they are on version 1.8.7. I would request you please let us know what all have you changed so that we can change the same and use or else please change the required on the current version
Igor on Wed, 13/11/2019 - 17:54
It is perfect! Thanks for the commitment! greetings from Brasil
Jong ZHe on Fri, 27/12/2019 - 15:08
Great!
Why didn't you push this on github?
swentel on Fri, 27/12/2019 - 15:12
Good question :) I guess I was a bit lazy at that time ..
Altair on Thu, 19/03/2020 - 18:04
Worked on my site! thanks a lot! I was getting really frustrated thinking it was a JQ error
Adam on Tue, 31/03/2020 - 17:37
Hi, excellent work! I've tried doing diffs to see if this could be applied to Chosen 1.8.7 - but a lot has changed since 1.1. Your update works so well with 1.1, I might stay with the old version. How could the Chosen authors not make it work on mobile as well as with your fix applied?
Could you possibly apply your fix to the 1.8.7 version? That would be vastly appreciated.
Dilru on Fri, 08/05/2020 - 02:36
You are a life saver - thank you so much for this neat solution !
Mou Karmakar on Fri, 15/05/2020 - 13:57
THANK YOU SO VERY MUCH...I'm gonna cry with happinness...Thank god for you!!!! spend entire day searching for answers!! Much LOVE
Anjaramamy on Tue, 16/06/2020 - 10:24
Thank you
danial on Wed, 14/10/2020 - 09:25
Thank you so much, you saved my life :)))
Marcel on Mon, 11/01/2021 - 12:05
I would be sooooo cool to get this for the 1.8.7 version...
Srinivas on Wed, 05/05/2021 - 08:40
Thank you so much :)
Rita Hartati on Wed, 25/08/2021 - 16:19
thank you so much code is works
ehsan on Mon, 13/09/2021 - 19:08
Thank you veryyyyyyyyyyyyyyyyy Goooodddddddd
Alex on Thu, 28/10/2021 - 22:18
Version 1.8.7
STEP 1
Replace mobile lock code
AbstractChosen.browser_is_supported = function() {
return true;
};
STEP 2
Comment evt.preventDefault();
if (evt && ((ref = evt.type) === 'mousedown' || ref === 'touchstart') && !this.results_showing) {
//evt.preventDefault();
}
Amit on Wed, 09/02/2022 - 19:49
I am facing problem with chosen in mobile view
Rafał on Thu, 17/03/2022 - 09:06
Thank's!!!!
Andrew on Mon, 28/03/2022 - 16:14
Hi guys trying to fix the same problem
I saw Alex posted the fix but when i search in the js file there i cannot find the line evt.preventDefault();
Moreover i dont know where to replace the lock code.
I also added the suggested code below from the original GitHub to the function.php file and it gives me a syntax error...
/**
* Fix for chose not working on mobile devices.
*/
function [themes name]_fix_gform_chosen_mobile() {
wp_deregister_script('gform_chosen');
wp_register_script('gform_chosen', path_join(get_stylesheet_directory_uri(), 'js/chosen.jquery.fix.min.js'), ['jquery'], '1.10.0-fix');
}
add_action('init', '[themes name]_fix_gform_chosen_mobile', 11);
Can someone help out please?
Carlos on Thu, 05/05/2022 - 11:50
Hey Andrew, you have to replace the [themes name] to the name of your theme, like divi or whatever is called. In both the function and the add_action thing
Add reply