Class-wp-widget-categories.php causes js error in console.

[arhit]

The implementation of onCatChange() javascript function in class-wp-widget-categories.php causes problems in themes which use wrappers to style select boxes (drop down menus).

HTML dropdowns are very limited in terms of styling possibilities. It is quite common practice for the front-end designers to use javascript to add a custom wrapper around the select boxes for further styling.

For the sake of clarity, to create a style like this (), one absolutely needs a custom wrapper.

In this case select box changes html structure:

	<select name="cat" id="cat" class="postform">
	...
	</select>

becomes

<div class="selectwrapper">
	<select name="cat" id="cat" class="postform">
	...
	</select>
</div>

If you do this in WordPress categories widget, an error is returned in console:

(index):830 Uncaught TypeError: dropdown.parentNode.submit is not a function
    at HTMLSelectElement.onCatChange ((index):830)

Interestingly, if you do the same thing with the archive widget, everything works as it should.

To test this, you can add this jQuery to functions.js file in the theme:

$('.widget_categories select, .widget_archive select').wrap('<div class="selectwrapper"></div>');

[arhit]

categories widget select

[arhit]

error in the console

[westonruter]

It would be more robust to use the form property on the select element to locate the form to submit. See 44019.0.diff​. The problem with that is that the form attribute is not available in IE11: ​https://caniuse.com/#feat=form-attribute

[westonruter]

44019.1.diff​ implements a more robust approach.