WordPress.org

Make WordPress Core

Opened 7 weeks ago

Last modified 6 weeks ago

#44019 new defect (bug)

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

Reported by: arhit Owned by:
Milestone: Future Release Priority: normal
Severity: normal Version: 2.8
Component: Widgets Keywords: has-patch
Focuses: Cc:

Description

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 (https://orionthemes.com/img/select-box.png), 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>');

Attachments (4)

Screen Shot 2018-05-09 at 13.16.26.png (7.6 KB) - added by arhit 7 weeks ago.
categories widget select
Screen Shot 2018-05-09 at 13.23.22.png (14.1 KB) - added by arhit 7 weeks ago.
error in the console
44019.0.diff (1.3 KB) - added by westonruter 6 weeks ago.
44019.1.diff (1.5 KB) - added by westonruter 6 weeks ago.

Download all attachments as: .zip

Change History (6)

@arhit
7 weeks ago

categories widget select

@arhit
7 weeks ago

error in the console

@westonruter
6 weeks ago

#1 @westonruter
6 weeks ago

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
6 weeks ago

#2 @westonruter
6 weeks ago

  • Keywords has-patch added; needs-patch removed
  • Milestone changed from Awaiting Review to Future Release
  • Version changed from 4.9.5 to 2.8

44019.1.diff implements a more robust approach.

Note: See TracTickets for help on using tickets.