RCFilters: React to popup 'ready' event

The new 'ready' event is emitted after the popup is already positioned
and clipped, we should respond to that event when displaying and
manipulating the elements rather than 'toggle', which is emitted
before the popup is placed correctly.

Change-Id: I84a74a10eb4d88e14899752019214633d9f41cb8

diff --git a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterWrapperWidget.js b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterWrapperWidget.js
index 761fc65..c81b685 100644 (file)
--- a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterWrapperWidget.js
+++ b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterWrapperWidget.js
@@ -71,7 +71,10 @@
                        enter: 'onTextInputEnter'
                } );
                this.capsule.connect( this, { capsuleItemClick: 'onCapsuleItemClick' } );
-               this.capsule.popup.connect( this, { toggle: 'onCapsulePopupToggle' } );
+               this.capsule.popup.connect( this, {
+                       toggle: 'onCapsulePopupToggle',
+                       ready: 'onCapsulePopupReady'
+               } );
 
                // Initialize
                this.$element
@@ -102,26 +105,29 @@
                this.scrollToTop( filterWidget.$element );
        };
 
+       /**
+        * Respond to capsule popup ready event, fired after the popup is visible, positioned and clipped
+        */
+       mw.rcfilters.ui.FilterWrapperWidget.prototype.onCapsulePopupReady = function () {
+               mw.hook( 'RcFilters.popup.open' ).fire( this.filterPopup.getSelectedFilter() );
+
+               this.scrollToTop( this.capsule.$element, 10 );
+               if ( !this.filterPopup.getSelectedFilter() ) {
+                       // No selection, scroll the popup list to top
+                       setTimeout( function () { this.capsule.popup.$body.scrollTop( 0 ); }.bind( this ), 0 );
+               }
+       };
+
        /**
         * Respond to popup toggle event. Reset selection in the list when the popup is closed.
         *
         * @param {boolean} isVisible Popup is visible
         */
        mw.rcfilters.ui.FilterWrapperWidget.prototype.onCapsulePopupToggle = function ( isVisible ) {
-               if ( !isVisible ) {
-                       if ( !this.textInput.getValue() ) {
-                               // Only reset selection if we are not filtering
-                               this.filterPopup.resetSelection();
-                               this.capsule.resetSelection();
-                       }
-               } else {
-                       mw.hook( 'RcFilters.popup.open' ).fire( this.filterPopup.getSelectedFilter() );
-
-                       this.scrollToTop( this.capsule.$element, 10 );
-                       if ( !this.filterPopup.getSelectedFilter() ) {
-                               // No selection, scroll the popup list to top
-                               setTimeout( function () { this.capsule.popup.$body.scrollTop( 0 ); }.bind( this ), 0 );
-                       }
+               if ( !isVisible && !this.textInput.getValue() ) {
+                       // Only reset selection if we are not filtering
+                       this.filterPopup.resetSelection();
+                       this.capsule.resetSelection();
                }
        };