PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.

Chosen.js change in version 1.7

  1. Since I updated to the new version of GF, I have had a few users notice that the enhanced user interface on drop-down boxes highlight search results instead of filtering everything but the results out.

    The way it would normally work is here (on the first line):
    http://harvesthq.github.io/chosen/

    The way it works now is here:
    http://forms.wesleyanschool.org/drop-down-test/

    Is this a problem with my site or a change between versions? If it is a change, is there any way to revert it to filtering?

    Posted 6 years ago on Friday May 3, 2013 | Permalink
  2. Richard Vav
    Administrator

    It would appear you are correct it seams something has changed in the update, I just tried this in my functions.php file and normal chosen search behaviour is restored.

    add_action('gform_enqueue_scripts','enqueue_chosen',10,2);
    function enqueue_chosen($form)
    // check to see if gravity forms has enqueued the chosen script, if it has then deregister it and then enqueue it and the stylesheet from cdnjs
    {
        if(wp_script_is('gforms_chosen',$list='queue')){
            wp_deregister_script('gforms_chosen');
    	wp_enqueue_script('chosen-script','//cdnjs.cloudflare.com/ajax/libs/chosen/0.9.12/chosen.jquery.min.js',array('jquery'),'0.9.12',true);
            wp_enqueue_style('chosen-style','//cdnjs.cloudflare.com/ajax/libs/chosen/0.9.12/chosen.min.css',array('gforms_formsmain_css'),'0.9.12');
        }
        return false;
    }

    Regards,
    Richard
    --
    Just another member of the community helping out where I can

    Posted 6 years ago on Friday May 3, 2013 | Permalink
  3. Richard, this is great! Thank you. It worked like a charm. Very cool solution.

    Posted 6 years ago on Saturday May 4, 2013 | Permalink
  4. Richard Vav
    Administrator

    Thanks and you're welcome.

    I have carried out one more quick test, commenting out lines 6 and 7 so only the CSS file from cdnjs is enqueued and used with the version of chosen.js included with Gravity Forms, that also works so it looks like when the developers updated the js file they may have missed updating some of the styles in formsmain.css.

    Posted 6 years ago on Saturday May 4, 2013 | Permalink
  5. Richard Vav
    Administrator

    Ok so I have located the problem that is preventing only the matching results being displayed, here is what we have in formsmain.css starting on line 1540

    .gform_wrapper .chzn-container .chzn-results li {
    	line-height: 80%;
    	padding: 7px 7px 8px;
    	margin: 0;
    	list-style: none;
    }
    .gform_wrapper .chzn-container .chzn-results .active-result {
    	cursor: pointer;
    }

    and this is what it should be updated to for the changes made in chosen 0.9.8

    .gform_wrapper .chzn-container .chzn-results li {
        display:none;
    	line-height: 80%;
    	padding: 7px 7px 8px;
    	margin: 0;
    	list-style: none;
    }
    .gform_wrapper .chzn-container .chzn-results .active-result {
    	cursor: pointer;
    	display: list-item;
    }

    notice the addition of the display:none and display:list-item properties

    Regards,
    Richard

    Posted 6 years ago on Wednesday May 8, 2013 | Permalink
  6. That's very interesting. I can confirm those CSS changes in formsmain.css bring back the ability to see only matching results without your functions.php workaround.

    Do you think that this is something that will be patched in a future version of GF or should I keep using the functions.php workaround?

    Posted 6 years ago on Thursday May 9, 2013 | Permalink
  7. Richard Vav
    Administrator

    I can't say for sure, I would like to think that the guys would include the change in a future update as I don't think it is an intentional change, rather a small oversight which is easy to do when dealing with hundreds and thousands of lines of code.

    For now though I would recommend placing the fixed CSS snippet from above in your theme's stylesheet in case it isn't fixed in the next update, 11 lines of CSS in a stylesheet that is already being loaded is better than a function pulling in one or more remote files.

    Regards,
    Richard

    Posted 6 years ago on Thursday May 9, 2013 | Permalink
  8. Richard Vav
    Administrator

    Just to keep this topic up-to-date Gravity Forms 1.7.3 is now out but does NOT include the updated CSS for the updated Chosen script so you will have to continue using the CSS snippet suggested above if you want the drop down results to be filtered as you type in the search box.

    Posted 6 years ago on Friday May 17, 2013 | Permalink
  9. David Peralty
    Administrator

    I'll point this out to our developers today. Thanks guys.

    Posted 6 years ago on Friday May 17, 2013 | Permalink
  10. Richard Vav
    Administrator

    Thanks David

    Posted 6 years ago on Friday May 17, 2013 | Permalink
  11. This was updated for the next release. Thanks Richard.

    Posted 6 years ago on Tuesday May 28, 2013 | Permalink

This topic has been resolved and has been closed to new replies.