MediaSearchWidget: Listen to "change" event to reposition

The "add" event is emitted too early (by the OO.EmitterList, before
the items are attached to the DOM) so instead we have to go by the
GroupElement event api itself -- which uses "change" event to all
item changes.

Listening to item change means that we are certain the items are
already attached to the DOM before we manipulate and read their
positioning, etc.

Bug: T162202
Change-Id: I3ef9d9451562c725e12a66b80048fc3836280d9f

diff --git a/resources/src/mediawiki.widgets/MediaSearch/mw.widgets.MediaSearchWidget.js b/resources/src/mediawiki.widgets/MediaSearch/mw.widgets.MediaSearchWidget.js
index c6938e8..5cbd2ec 100644 (file)
--- a/resources/src/mediawiki.widgets/MediaSearch/mw.widgets.MediaSearchWidget.js
+++ b/resources/src/mediawiki.widgets/MediaSearch/mw.widgets.MediaSearchWidget.js
@@ -65,7 +65,7 @@
                this.$results.on( 'scroll', this.onResultsScroll.bind( this ) );
                this.$query.append( this.noItemsMessage.$element );
                this.results.connect( this, {
-                       add: 'onResultsAdd',
+                       change: 'onResultsChange',
                        remove: 'onResultsRemove'
                } );
 
@@ -357,9 +357,13 @@
         *
         * @param {mw.widgets.MediaResultWidget[]} items An array of item elements
         */
-       mw.widgets.MediaSearchWidget.prototype.onResultsAdd = function ( items ) {
+       mw.widgets.MediaSearchWidget.prototype.onResultsChange = function ( items ) {
                var search = this;
 
+               if ( !items.length ) {
+                       return;
+               }
+
                // Add method to a queue; this queue will only run when the widget
                // is visible
                this.layoutQueue.push( function () {