Make WordPress Core

Opened 10 years ago

Closed 10 years ago

#30223 closed defect (bug) (fixed)

Customizer range controls don't update until the mouse is released

Reported by: sublink's profile sublink Owned by: ocean90's profile ocean90
Milestone: 4.1 Priority: normal
Severity: normal Version: 4.0
Component: Customize Keywords: has-patch
Focuses: javascript Cc:


When adding customizer control with a type of range, the preview JS doesn't receive an event until the mouse is released.

I believe the customizer is listening for the onchange event, but it looks like that should only be triggered when the user releases the mouse. To get continuous updates, you can use the oninput event, which will capture live updates in Firefox, Safari and Chrome, both from the mouse and the keyboard.

However, oninput is not supported in IE10, so you might have to combine the two event handlers.

Attachments (1)

30223.diff (555 bytes) - added by voldemortensen 10 years ago.

Download all attachments as: .zip

Change History (4)

#1 @westonruter
10 years ago

  • Keywords needs-patch added
  • Milestone changed from Awaiting Review to 4.1

sublink: Thanks for the report! Yes, this is a good catch. For the widget controls added in 3.9, changes to the widget forms are being listened to via the change event but also the input (for non-IE) and propertychange events (for IE).

$widgetContent.on( 'change input propertychange', ':input', function( e ) {

So the following change could be made to address the problem:

  • src/wp-includes/js/customize-base.js

    window.wp = window.wp || {}; 
    430430                                                synchronizer = api.Element.synchronizer[ type ];
    431431                                        if ( 'text' === type || 'password' === type )
    432432                                       += ' keyup';
     433                                        else if ( 'range' === type )
     434                                       += ' input propertychange';
    433435                                } else if ('textarea') ) {
    434436                               += ' keyup';
    435437                                }

(Cleanup of JS coding standards notwithstanding.)

#2 @voldemortensen
10 years ago

  • Keywords has-patch added; needs-patch removed

Made patch according to comments.

#3 @ocean90
10 years ago

  • Owner set to ocean90
  • Resolution set to fixed
  • Status changed from new to closed

In 30219:

Customizer: Bind input and propertychange events for range input types.

props voldemortensen, westonruter.
fixes #30223.

Note: See TracTickets for help on using tickets.