DateInputWidget: Unbreak closing the calendar when selecting a date

I24327e1fe broke this by reopening the calendar when the handle was focused.

Bonus: also fix auto-closing in { precision: 'month' } mode.

Bug: T120733
Change-Id: Ief43f10c1e01f9a6f90b098e4f8ec1f84d8038d1

diff --git a/resources/src/mediawiki.widgets/mw.widgets.DateInputWidget.js b/resources/src/mediawiki.widgets/mw.widgets.DateInputWidget.js
index 50a84f8..d41a147 100644 (file)
--- a/resources/src/mediawiki.widgets/mw.widgets.DateInputWidget.js
+++ b/resources/src/mediawiki.widgets/mw.widgets.DateInputWidget.js
@@ -130,6 +130,7 @@
                } );
                this.inCalendar = 0;
                this.inTextInput = 0;
+               this.closing = false;
                this.inputFormat = config.inputFormat;
                this.displayFormat = config.displayFormat;
                this.longDisplayFormat = config.longDisplayFormat;
@@ -173,7 +174,7 @@
                this.$handle.on( {
                        click: this.onClick.bind( this ),
                        keypress: this.onKeyPress.bind( this ),
-                       focus: this.activate.bind( this )
+                       focus: this.onFocus.bind( this )
                } );
 
                // Initialization
@@ -521,6 +522,17 @@
                }
        };
 
+       /**
+        * Handle focus events.
+        *
+        * @private
+        */
+       mw.widgets.DateInputWidget.prototype.onFocus = function () {
+               if ( !this.closing ) {
+                       this.activate();
+               }
+       };
+
        /**
         * Handle calendar key press events.
         *
@@ -530,8 +542,13 @@
         */
        mw.widgets.DateInputWidget.prototype.onCalendarKeyPress = function ( e ) {
                if ( !this.isDisabled() && e.which === OO.ui.Keys.ENTER ) {
+                       // Prevent focusing the handle from reopening the calendar
+                       this.closing = true;
+
                        this.deactivate();
                        this.$handle.focus();
+
+                       this.closing = false;
                        return false;
                }
        };
@@ -547,10 +564,18 @@
                if (
                        !this.isDisabled() &&
                        e.which === 1 &&
-                       $( e.target ).hasClass( 'mw-widget-calendarWidget-day' )
+                       (
+                               $( e.target ).hasClass( 'mw-widget-calendarWidget-day' ) ||
+                               $( e.target ).hasClass( 'mw-widget-calendarWidget-month' )
+                       )
                ) {
+                       // Prevent focusing the handle from reopening the calendar
+                       this.closing = true;
+
                        this.deactivate();
                        this.$handle.focus();
+
+                       this.closing = false;
                        return false;
                }
        };
@@ -561,8 +586,13 @@
         * @private
         */
        mw.widgets.DateInputWidget.prototype.onEnter = function () {
+               // Prevent focusing the handle from reopening the calendar
+               this.closing = true;
+
                this.deactivate();
                this.$handle.focus();
+
+               this.closing = false;
        };
 
        /**