WordPress.org

Make WordPress Core

Opened 5 years ago

Closed 5 years ago

#30223 closed defect (bug) (fixed)

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

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

Description

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.

https://bugzilla.mozilla.org/show_bug.cgi?id=853670

Attachments (1)

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

Download all attachments as: .zip

Change History (4)

#1 @westonruter
5 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                                                this.events += ' keyup';
     433                                        else if ( 'range' === type )
     434                                                this.events += ' input propertychange';
    433435                                } else if ( this.element.is('textarea') ) {
    434436                                        this.events += ' keyup';
    435437                                }

(Cleanup of JS coding standards notwithstanding.)

@voldemortensen
5 years ago

#2 @voldemortensen
5 years ago

  • Keywords has-patch added; needs-patch removed

Made patch according to comments.

#3 @ocean90
5 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.