mw.special.contributions: Do not infuse the date input while it has user focus

This is especially important on Firefox, where hiding the native date
input while the native date picker is open will cause the date picker
to remain visible (but non-functional), but not replacing the interface
while the user is working with it is probably a good idea anyway.

Bug: T183624
Change-Id: I4d5e0f6b98c7c1ecdff552ddf0950db1ec3ae023

diff --git a/resources/src/mediawiki.special.contributions.js b/resources/src/mediawiki.special.contributions.js
index f65a257..6558bda 100644 (file)
--- a/resources/src/mediawiki.special.contributions.js
+++ b/resources/src/mediawiki.special.contributions.js
@@ -1,12 +1,38 @@
 ( function ( mw, $ ) {
+
+       // Return a promise that is resolved when the element is blurred (loses focus).
+       // If it already is blurred, resolved immediately.
+       function whenBlurred( $elem ) {
+               var deferred = $.Deferred();
+               if ( $elem.is( ':focus' ) ) {
+                       $elem.one( 'blur', deferred.resolve );
+               } else {
+                       deferred.resolve();
+               }
+               return deferred.promise();
+       }
+
        $( function () {
-               var startInput = mw.widgets.DateInputWidget.static.infuse( 'mw-date-start' ),
-                       endInput = mw.widgets.DateInputWidget.static.infuse( 'mw-date-end' );
+               var startReady, endReady;
+
+               // Do not infuse the date input while it has user focus.
+               // This is especially important on Firefox, where hiding the native date input while the native
+               // date picker is open will cause the date picker to remain visible (but non-functional), but
+               // not replacing the interface while the user is working with it is probably a good idea anyway.
+               startReady = whenBlurred( $( '#mw-date-start .oo-ui-inputWidget-input' ) ).then( function () {
+                       return mw.widgets.DateInputWidget.static.infuse( 'mw-date-start' );
+               } );
+               endReady = whenBlurred( $( '#mw-date-end .oo-ui-inputWidget-input' ) ).then( function () {
+                       return mw.widgets.DateInputWidget.static.infuse( 'mw-date-end' );
+               } );
 
-               startInput.on( 'deactivate', function ( userSelected ) {
-                       if ( userSelected ) {
-                               endInput.focus();
-                       }
+               $.when( startReady, endReady ).then( function ( startInput, endInput ) {
+                       startInput.on( 'deactivate', function ( userSelected ) {
+                               if ( userSelected ) {
+                                       endInput.focus();
+                               }
+                       } );
                } );
        } );
+
 }( mediaWiki, jQuery ) );