Merge 3a39671 into bd1208d

src/vaadin-date-picker-mixin.html

@@ -82,6 +82,11 @@
           observer: '_openedChanged'
         },
 
+        /**
+         * Set true to prevent the overlay from opening automatically.
+         */
+        autoOpenDisabled: Boolean,
+
         /**
          * Set true to display ISO-8601 week numbers in the calendar. Notice that
          * displaying week numbers is only supported when `i18n.firstDayOfWeek`
@@ -329,7 +334,7 @@
         // then the following composedPath check could be simplified down
         // to `if (!e.defaultPrevented)`.
         // https://github.com/vaadin/vaadin-text-field/issues/352
-        if (!isClearButton(e)) {
+        if (!isClearButton(e) && (!this.autoOpenDisabled || this._noInput)) {
           this.open();
         }
       });
@@ -342,7 +347,10 @@
       this.addEventListener('keydown', this._onKeydown.bind(this));
       this.addEventListener('input', this._onUserInput.bind(this));
       this.addEventListener('focus', e => this._noInput && e.target.blur());
-      this.addEventListener('blur', e => !this.opened && this.validate());
+      this.addEventListener('blur', e => {
+        this.autoOpenDisabled && this._onOverlayClosed();
+        !this.opened && this.validate();
+      });
     }
 
     _initOverlay() {
@@ -844,7 +852,7 @@
     }
 
     _onUserInput(e) {
-      if (!this.opened && this._inputElement.value) {
+      if (!this.opened && this._inputElement.value && !this.autoOpenDisabled) {
         this.open();
       }
       this._userInputValueChanged();

test/basic.html

@@ -148,6 +148,16 @@
         listenForEvent(datepicker.$.overlay, 'vaadin-overlay-open', done);
       });
 
+      it('should not open on input tap when autoOpenDisabled is true and not on mobile', () => {
+        datepicker.autoOpenDisabled = true;
+        tap(datepicker.$.input);
+        if (!datepicker._noInput) {
+          expect(datepicker.opened).not.to.be.true;
+        } else {
+          expect(datepicker.opened).to.be.true;
+        }
+      });
+
       it('should pass the placeholder attribute to the input tag', () => {
         var placeholder = 'Pick a date';
         datepicker.set('placeholder', placeholder);
@@ -240,6 +250,12 @@
         listenForEvent(datepicker.$.overlay, 'vaadin-overlay-open', done);
       });
 
+      it('should open by tapping the calendar icon even if autoOpenDisabled is true', done => {
+        this.autoOpenDisabled = true;
+        tap(toggleButton);
+        listenForEvent(datepicker.$.overlay, 'vaadin-overlay-open', done);
+      });
+
       it('should scroll to a date on open', done => {
         const overlayContent = getOverlayContent(datepicker);
         // We must scroll to a date on every open because at least IE11 seems to reset

test/custom-input.html

@@ -64,6 +64,14 @@
         datepicker._nativeInput.dispatchEvent(new CustomEvent('input', {bubbles: true}));
       });
 
+      it('should not open calendar on input when autoOpenDisabled is true', () => {
+        var target = datepicker._inputElement;
+        datepicker.autoOpenDisabled = true;
+        target.bindValue = '1';
+        datepicker._nativeInput.dispatchEvent(new CustomEvent('input', {bubbles: true}));
+        expect(datepicker.$.overlay.opened).not.to.be.true;
+      });
+
       it('should show week numbers', () => {
         datepicker.showWeekNumbers = true;
         expect(overlayContent.showWeekNumbers).to.equal(true);

test/keyboard-input.html

@@ -84,6 +84,26 @@
           expect(datepicker.opened).to.be.true;
         });
 
+        it('should not open overlay on input if autoOpenDisabled is true', () => {
+          datepicker.autoOpenDisabled = true;
+          inputChar('j');
+          expect(datepicker.opened).not.to.be.true;
+        });
+
+        it('should set datepicker value on blur if autoOpenDisabled is true', () => {
+          datepicker.autoOpenDisabled = true;
+          inputChar('1/1/2000');
+          datepicker.dispatchEvent(new Event('blur'));
+          expect(datepicker.value).to.equal('2000-01-01');
+        });
+
+        it('should not be invalid on blur if valid date is enetered and autoOpenDisabled is true', () => {
+          datepicker.autoOpenDisabled = true;
+          inputChar('1/1/2000');
+          datepicker.dispatchEvent(new Event('blur'));
+          expect(datepicker.invalid).not.to.be.true;
+        });
+
         it('should not focus with unparseable date', () => {
           inputChar('j');
 

test/keyboard-navigation.html

@@ -96,13 +96,29 @@
             expect(datepicker.opened).to.be.true;
           });
 
+          it('should open overlay on down even if autoOpenDisabled is true', () => {
+            datepicker.autoOpenDisabled = true;
+            target = datepicker.$.input;
+            arrowDown();
+
+            expect(datepicker.opened).to.be.true;
+          });
+
           it('should open overlay on up', () => {
             target = datepicker.$.input;
             arrowUp();
 
             expect(datepicker.opened).to.be.true;
           });
 
+          it('should open overlay on up even if autoOpenDisabled is true', () => {
+            datepicker.autoOpenDisabled = true;
+            target = datepicker.$.input;
+            arrowUp();
+
+            expect(datepicker.opened).to.be.true;
+          });
+
           it('should close overlay on esc', done => {
             datepicker.open();
             target = datepicker.$.overlay;