Categories dropdown menu issues with latest jquery

[bindlegirl]

Describe the bug Categories dropdown menu doesn't stay open when clicking on it. Instead, on click, it loads the first available category. The reset button within the dropdown menu (x) doesn't work.

It seems to be related to jquery as loading legacy library fixes the problem. Also, when Multi-select Categories are enabled, the dropdown works slightly better (the menu remains open but the behavior is still wonky and the reset button doesn't. work either).

To Reproduce Steps to reproduce the behavior:

1. Set up the categories with Multi-select Categories disabled
2. Go to job listings (on the frontend Jobs page) and try to select a category
3. One category will be automatically selected
4. To see the rest of the categories, you need to press and hold the dropdown menu
5. Reset using the x inside the menu doesn't work

Screenshots Screencast: https://d.pr/v/83S5jq

Expected behavior When clicking on the dropdown menu, the menu stays open. Resetting through x works.

Isolating the problem (mark completed items with an [x]):

• [x] I have deactivated other plugins and confirmed this bug occurs when only the WP Job Manager plugin is active.
• [x] This bug happens with a default WordPress theme active.
• [x] I can reproduce this bug consistently using the steps above.

WordPress Environment

• WordPress Version: 5.6, 5.7
• WP Job Manager Version: 1.35
• PHP Version: 7.4
• Other important details: Problem is resolved when using legacy jquery library

Mentioned in 3805169-zen

[tripflex]

So this is actually caused by the latest WordPress 5.5+ release which I think must have changed something in regards to the admin bar, as the problem you're having is due to the admin bar on the page, causing the Select2 dropdown to show higher than it should ... which results in the first option being selected.

A patch to fix this issue: https://gist.github.com/tripflex/7f4a10fb27c7e8c95c86010f93ac250b

@jom it may be a good idea to look at implementing this CSS into the core plugin to fix these Select2 issues? It's weird too i've seem some themes that don't have this issue, while others do.

[nvourva]

A patch to fix this issue: https://gist.github.com/tripflex/7f4a10fb27c7e8c95c86010f93ac250b

We've ran into this issue as well lately and I'd like to suggest some alternative styles for the patch suggested by @tripflex above because that ended up affecting any select2 instance on the site when the admin bar is visible. In our case for example it pushed the select2 container with countries down on the WooCommerce cart/chekcout pages.

I've ended up using these .admin-bar #select2-js-extra ~ .select2-container--open .select2-dropdown--below { top: 32px; }

@media (max-width: 782px) { .admin-bar #select2-js-extra ~ .select2-container--open .select2-dropdown--below { top: 46px; } }

WP Job Manager seems to insert a script with the id of select2-js-extra on pages it loads its filtering system, thus it provided us with a way to isolate our styles a bit better. By using the styles above we've managed to temporarily fix the issue only on pages where WP Job Manager applies its filtering without affecting any other pages.

[bobmatyas]

Another report: https://wordpress.org/support/topic/issue-with-category-drop-down/?view=all

[tripflex]

Yeah i've found that this also varies from theme to theme as well depending on how they set the CSS on the wrapper around the entire site .. so might be a little difficult to troubleshoot, maybe just need to make sure it works fine on standard theme