RCFilters UI: Prevent label from stealing focus on click

The filter options' labels are set as "label for" the checkbox
which means that by default they "give" the focus away to the
checkbox when clicked. However, we don't want that behavior so
that we can continue arrow movement through the filter option
items rather than the DOM elements. Also, the checkbox prevents
defaults on click as well as it is.

Change-Id: I9758b0dacd8cd647ec5e3e623edc66e1d7f7420a

diff --git a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterMenuOptionWidget.js b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterMenuOptionWidget.js
index b46c069..bda537f 100644 (file)
--- a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterMenuOptionWidget.js
+++ b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterMenuOptionWidget.js
@@ -59,10 +59,15 @@
                        label: $label,
                        align: 'inline'
                } );
-
                // Event
                this.model.connect( this, { update: 'onModelUpdate' } );
                this.model.getGroupModel().connect( this, { update: 'onGroupModelUpdate' } );
+               // HACK: Prevent defaults on 'click' for the label so it
+               // doesn't steal the focus away from the input. This means
+               // we can continue arrow-movement after we click the label
+               // and is consistent with the checkbox *itself* also preventing
+               // defaults on 'click' as well.
+               layout.$label.on( 'click', false );
 
                this.$element
                        .addClass( 'mw-rcfilters-ui-filterMenuOptionWidget' )

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 2461929..c09de18 100644 (file)
--- a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterTagMultiselectWidget.js
+++ b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterTagMultiselectWidget.js
@@ -206,6 +206,8 @@
         */
        mw.rcfilters.ui.FilterTagMultiselectWidget.prototype.onMenuChoose = function ( item ) {
                this.controller.toggleFilterSelect( item.model.getName() );
+
+               this.focus();
        };
 
        /**