.mw-rcfilters-ui-filterMenuOptionWidget {
&.oo-ui-flaggedElement-muted {
- background-color: #f8f9fa; // Base90 AAA
+ &:not( .oo-ui-optionWidget-selected ) {
+ // Namespaces are muted 'the other way around' when they
+ // are also inverted, so if they are also selected, we
+ // should make sure the selected background is shown rather
+ // than the muted one
+ background-color: #f8f9fa; // Base90 AAA
+ }
.mw-rcfilters-ui-itemMenuOptionWidget-label-title,
.mw-rcfilters-ui-itemMenuOptionWidget-label-desc {
* Set the current muted view of the widget based on its state
*/
mw.rcfilters.ui.FilterMenuOptionWidget.prototype.setCurrentMuteState = function () {
- this.setFlags( {
- muted: (
- this.model.isConflicted() ||
- (
- // Item is also muted when any of the items in its group is active
- this.model.getGroupModel().isActive() &&
- // But it isn't selected
- !this.model.isSelected() &&
- // And also not included
- !this.model.isIncluded()
+ if (
+ this.model.getGroupModel().getView() === 'namespaces' &&
+ this.model.isInverted()
+ ) {
+ // This is an inverted behavior than the other rules, specifically
+ // for inverted namespaces
+ this.setFlags( {
+ muted: this.model.isSelected()
+ } );
+ } else {
+ this.setFlags( {
+ muted: (
+ this.model.isConflicted() ||
+ (
+ // Item is also muted when any of the items in its group is active
+ this.model.getGroupModel().isActive() &&
+ // But it isn't selected
+ !this.model.isSelected() &&
+ // And also not included
+ !this.model.isIncluded()
+ )
)
- )
- } );
+ } );
+ }
};
}( mediaWiki ) );
menuOption = this.menu.getItemFromModel( tagItem.getModel() ),
oldInputValue = this.input.getValue();
+ this.menu.setUserSelecting( true );
+
// Reset input
this.input.setValue( '' );
// user filtered the results
this.getMenu().once(
'itemVisibilityChange',
- function () { widget.scrollToTop( menuOption.$element ); }
+ function () {
+ widget.scrollToTop( menuOption.$element );
+ widget.menu.setUserSelecting( false );
+ }
);
} else {
this.scrollToTop( menuOption.$element );
+ this.menu.setUserSelecting( false );
}
+
};
/**
this.model = model;
this.currentView = '';
this.views = {};
+ this.userSelecting = false;
this.inputValue = '';
this.$overlay = config.$overlay || this.$element;
// Since the method hides/shows items, we don't want to
// call it unless the input actually changed
- if ( this.inputValue !== inputVal ) {
+ if (
+ !this.userSelecting &&
+ this.inputValue !== inputVal
+ ) {
// Parent method
mw.rcfilters.ui.MenuSelectWidget.parent.prototype.updateItemVisibility.call( this );
mw.rcfilters.ui.MenuSelectWidget.prototype.scrollToTop = function () {
this.$body.scrollTop( 0 );
};
+
+ /**
+ * Set whether the user is currently selecting an item.
+ * This is important when the user selects an item that is in between
+ * different views, and makes sure we do not re-select a different
+ * item (like the item on top) when this is happening.
+ *
+ * @param {boolean} isSelecting User is selecting
+ */
+ mw.rcfilters.ui.MenuSelectWidget.prototype.setUserSelecting = function ( isSelecting ) {
+ this.userSelecting = !!isSelecting;
+ };
}( mediaWiki ) );