mw.widgets.TitleOptionWidget: Prevent page navigation by clicking labels

However, allow opening the link in a new tab.

The same code is used in other components, e.g. jquery.suggestions.

Follow-up to ba358947bfb81b58d64489063bd4be816d1a46da.

Change-Id: Ie6840a20c1cc1a10fb1fb74717982dbe7e331d36

diff --git a/resources/src/mediawiki.widgets/mw.widgets.TitleOptionWidget.js b/resources/src/mediawiki.widgets/mw.widgets.TitleOptionWidget.js
index 138715a..9b0b270 100644 (file)
--- a/resources/src/mediawiki.widgets/mw.widgets.TitleOptionWidget.js
+++ b/resources/src/mediawiki.widgets/mw.widgets.TitleOptionWidget.js
@@ -51,6 +51,14 @@
                this.$label.attr( 'href', config.url );
                this.$element.addClass( 'mw-widget-titleOptionWidget' );
 
+               // Allow opening the link in new tab, but not regular navigation.
+               this.$label.on( 'click', function ( e ) {
+                       // Do not interfere with non-left clicks or if modifier keys are pressed (e.g. ctrl-click).
+                       if ( !( e.which !== 1 || e.altKey || e.ctrlKey || e.shiftKey || e.metaKey ) ) {
+                               e.preventDefault();
+                       }
+               } );
+
                // Highlight matching parts of link suggestion
                this.$label.autoEllipsis( { hasSpan: false, tooltip: true, matchText: config.query } );