Chosen.js change in version 1.7 « Gravity Support Forums

Gravity Support Forums » Plugin Support » Gravity Forms

Andrew
Member

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 11 years ago on Friday May 3, 2013 | Permalink

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 11 years ago on Friday May 3, 2013 | Permalink

Andrew
Member

Richard, this is great! Thank you. It worked like a charm. Very cool solution.

Posted 11 years ago on Saturday May 4, 2013 | Permalink
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 11 years ago on Saturday May 4, 2013 | Permalink

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 11 years ago on Wednesday May 8, 2013 | Permalink

Andrew
Member

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 11 years ago on Thursday May 9, 2013 | Permalink
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 11 years ago on Thursday May 9, 2013 | Permalink
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 11 years ago on Friday May 17, 2013 | Permalink
David Peralty

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

Posted 11 years ago on Friday May 17, 2013 | Permalink
Richard Vav
Administrator

Thanks David

Posted 11 years ago on Friday May 17, 2013 | Permalink
Kevin Flahaut
Administrator

This was updated for the next release. Thanks Richard.

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

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