jenkins-bot has submitted this change and it was merged. ( 
https://gerrit.wikimedia.org/r/358499 )

Change subject: MenuSelectWidget: Fix item hiding when menu contents change
......................................................................


MenuSelectWidget: Fix item hiding when menu contents change

updateItemVisibility() adds a CSS class to hide the menu when
it hides all items, but that means it should also reevaluate whether
all items are hidden when new items are added. Lookup-style widgets
can add items to menus dynamically, and those items should immediately
be hidden if they don't match the search string, or cause the
menu to be unhidden if they do match.

Add updateItemVisibility() calls to addItems() and removeItems().
Also make updateItemVisibility() the function that should generally
be called when things change, which means making it safe to call
if there is no input or input filtering, and using it to clip
instead of calling clip() directly.

Change-Id: Iec3c6757c7ab5d8866dfb4d5769008a34fb52fb6
---
M src/widgets/MenuSelectWidget.js
1 file changed, 41 insertions(+), 40 deletions(-)

Approvals:
  Bartosz Dziewoński: Looks good to me, approved
  jenkins-bot: Verified



diff --git a/src/widgets/MenuSelectWidget.js b/src/widgets/MenuSelectWidget.js
index 808c535..1ea6e32 100644
--- a/src/widgets/MenuSelectWidget.js
+++ b/src/widgets/MenuSelectWidget.js
@@ -150,54 +150,58 @@
 };
 
 /**
- * Update menu item visibility after input changes.
+ * Update menu item visibility and clipping after input changes (if 
filterFromInput is enabled)
+ * or after items were added/removed (always).
  *
  * @protected
  */
 OO.ui.MenuSelectWidget.prototype.updateItemVisibility = function () {
-       var i, item, visible, section, sectionEmpty,
+       var i, item, visible, section, sectionEmpty, filter, exactFilter,
                firstItemFound = false,
                anyVisible = false,
                len = this.items.length,
                showAll = !this.isVisible(),
-               filter = showAll ? null : this.getItemMatcher( 
this.$input.val() ),
-               exactFilter = this.getItemMatcher( this.$input.val(), true ),
                exactMatch = false;
 
-       // Hide non-matching options, and also hide section headers if all 
options
-       // in their section are hidden.
-       for ( i = 0; i < len; i++ ) {
-               item = this.items[ i ];
-               if ( item instanceof OO.ui.MenuSectionOptionWidget ) {
-                       if ( section ) {
-                               // If the previous section was empty, hide its 
header
-                               section.toggle( showAll || !sectionEmpty );
-                       }
-                       section = item;
-                       sectionEmpty = true;
-               } else if ( item instanceof OO.ui.OptionWidget ) {
-                       visible = showAll || filter( item );
-                       exactMatch = exactMatch || exactFilter( item );
-                       anyVisible = anyVisible || visible;
-                       sectionEmpty = sectionEmpty && !visible;
-                       item.toggle( visible );
-                       if ( this.highlightOnFilter && visible && 
!firstItemFound ) {
-                               // Highlight the first item in the list
-                               this.highlightItem( item );
-                               firstItemFound = true;
+       if ( this.$input && this.filterFromInput ) {
+               filter = showAll ? null : this.getItemMatcher( 
this.$input.val() );
+               exactFilter = this.getItemMatcher( this.$input.val(), true );
+
+               // Hide non-matching options, and also hide section headers if 
all options
+               // in their section are hidden.
+               for ( i = 0; i < len; i++ ) {
+                       item = this.items[ i ];
+                       if ( item instanceof OO.ui.MenuSectionOptionWidget ) {
+                               if ( section ) {
+                                       // If the previous section was empty, 
hide its header
+                                       section.toggle( showAll || 
!sectionEmpty );
+                               }
+                               section = item;
+                               sectionEmpty = true;
+                       } else if ( item instanceof OO.ui.OptionWidget ) {
+                               visible = showAll || filter( item );
+                               exactMatch = exactMatch || exactFilter( item );
+                               anyVisible = anyVisible || visible;
+                               sectionEmpty = sectionEmpty && !visible;
+                               item.toggle( visible );
+                               if ( this.highlightOnFilter && visible && 
!firstItemFound ) {
+                                       // Highlight the first item in the list
+                                       this.highlightItem( item );
+                                       firstItemFound = true;
+                               }
                        }
                }
-       }
-       // Process the final section
-       if ( section ) {
-               section.toggle( showAll || !sectionEmpty );
-       }
+               // Process the final section
+               if ( section ) {
+                       section.toggle( showAll || !sectionEmpty );
+               }
 
-       if ( anyVisible && this.items.length && !exactMatch ) {
-               this.scrollItemIntoView( this.items[ 0 ] );
-       }
+               if ( anyVisible && this.items.length && !exactMatch ) {
+                       this.scrollItemIntoView( this.items[ 0 ] );
+               }
 
-       this.$element.toggleClass( 'oo-ui-menuSelectWidget-invisible', 
!anyVisible );
+               this.$element.toggleClass( 'oo-ui-menuSelectWidget-invisible', 
!anyVisible );
+       }
 
        // Reevaluate clipping
        this.clip();
@@ -279,8 +283,7 @@
        // Parent method
        OO.ui.MenuSelectWidget.parent.prototype.addItems.call( this, items, 
index );
 
-       // Reevaluate clipping
-       this.clip();
+       this.updateItemVisibility();
 
        return this;
 };
@@ -292,8 +295,7 @@
        // Parent method
        OO.ui.MenuSelectWidget.parent.prototype.removeItems.call( this, items );
 
-       // Reevaluate clipping
-       this.clip();
+       this.updateItemVisibility();
 
        return this;
 };
@@ -305,8 +307,7 @@
        // Parent method
        OO.ui.MenuSelectWidget.parent.prototype.clearItems.call( this );
 
-       // Reevaluate clipping
-       this.clip();
+       this.updateItemVisibility();
 
        return this;
 };

-- 
To view, visit https://gerrit.wikimedia.org/r/358499
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings

Gerrit-MessageType: merged
Gerrit-Change-Id: Iec3c6757c7ab5d8866dfb4d5769008a34fb52fb6
Gerrit-PatchSet: 4
Gerrit-Project: oojs/ui
Gerrit-Branch: master
Gerrit-Owner: Catrope <r...@wikimedia.org>
Gerrit-Reviewer: Bartosz Dziewoński <matma....@gmail.com>
Gerrit-Reviewer: Catrope <r...@wikimedia.org>
Gerrit-Reviewer: Jforrester <jforres...@wikimedia.org>
Gerrit-Reviewer: Mooeypoo <mor...@gmail.com>
Gerrit-Reviewer: jenkins-bot <>

_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits

Reply via email to