Make filter area togglable

- Close and open the dropdown filter menu when
a user clicks on the active filter area.
- Fix inaccessible menu when user clicks on browser
scrollbar while dropdown filter menu is visible.

Bug: T176954
Change-Id: Id1c0c5078d80064a432b3db0f42775d0c00cdd85

diff --git a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterTagMultiselectWidget.js b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterTagMultiselectWidget.js
index a2ce20e..0d39cd0 100644 (file)
--- a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterTagMultiselectWidget.js
+++ b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterTagMultiselectWidget.js
@@ -285,6 +285,8 @@
                mw.rcfilters.ui.FilterTagMultiselectWidget.parent.prototype.onMenuToggle.call( this );
 
                if ( isVisible ) {
+                       this.focus();
+
                        mw.hook( 'RcFilters.popup.open' ).fire();
 
                        if ( !this.getMenu().getSelectedItem() ) {
@@ -294,6 +296,8 @@
                                setTimeout( function () { this.getMenu().scrollToTop(); }.bind( this ), 0 );
                        }
                } else {
+                       this.blur();
+
                        // Clear selection
                        this.selectTag( null );
 
@@ -337,6 +341,17 @@
                this.input.$input.blur();
        };
 
+       /**
+        * @inheritdoc
+        */
+       mw.rcfilters.ui.FilterTagMultiselectWidget.prototype.onMouseDown = function ( e ) {
+               if ( !this.isDisabled() && e.which === OO.ui.MouseButtons.LEFT ) {
+                       this.menu.toggle();
+
+                       return false;
+               }
+       };
+
        /**
         * @inheritdoc
         */