1

I just noticed that widget-synced is triggered twice when you're trying to edit a widget, click on a text field, write something, triggers widget-synced once and after that, if you click anywhere else it triggers a second time.

enter image description here

Is this default behavior and can it be prevented in a custom widget?

Thanks!

Pinging @WestonRuter

Improve this question
3
  • I am asking because I have a some sortable text fields (using jQuery UI) in a custom widget and if I try doing the above, but instead of clicking outside the field I try to sort directly, the Apply button appears.
    – superwinner
    Commented Feb 25, 2017 at 15:41
  • I kinda managed to fix it, don't know if it's the proper way, this is in case of sortable fields, using the stop event and checking if the "Apply" button is inside the widget: jsfiddle.net/6h5t5r6y
    – superwinner
    Commented Feb 25, 2017 at 17:37
  • Please add your fiddle as an answer to your question, then accept it, so we can close this question as solved.
    – cjbj
    Commented Feb 25, 2017 at 18:07

2 Answers 2

Reset to default
2

The reason for this is that the widget will run its update logic on keydown and also on change for a given input element. See https://github.com/WordPress/wordpress-develop/blob/4.7.2/src/wp-admin/js/customize-widgets.js#L891-L907

There are some tradeoffs made when widgets were added to the customizer to bring these PHP-driven interfaces into a JS-driven context. It wasn't perfect and so this is part of the reason behind the JS Widgets feature plugin, to modernize how custom widgets are implemented in the customizer.

If you want to really just listen for when a widget actually changes its state, you can listen for the control's underlying setting change instead. The setting will only be updated once after a given keydown and subsequent change event.

Improve this answer
0

I kinda managed to fix it, don't know if it's the proper way, this is in case of sortable fields, using the stop event and checking if the "Apply" button is inside the widget: https://jsfiddle.net/6h5t5r6y

Improve this answer
1
  • Please add all the relevant code, with explanation, into your answer, as external links can get "cold". Thanks.
    – birgire
    Commented Feb 26, 2017 at 21:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.