Merge acceda1 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() {
@@ -395,7 +403,7 @@
      * Closes the dropdown.
      */
     close() {
-      if (this._overlayInitialized) {
+      if (this._overlayInitialized || this.autoOpenDisabled) {
         this.$.overlay.close();
       }
     }
@@ -844,14 +852,14 @@
     }
 
     _onUserInput(e) {
-      if (!this.opened && this._inputElement.value) {
+      if (!this.opened && this._inputElement.value && !this.autoOpenDisabled) {
         this.open();
       }
       this._userInputValueChanged();
     }
 
     _userInputValueChanged(value) {
-      if (this.opened && this._inputValue) {
+      if ((this.opened || this.autoOpenDisabled) && this._inputValue) {
         const dateObject = this.i18n.parseDate && this.i18n.parseDate(this._inputValue);
         const parsedDate = dateObject &&
           this._parseDate(`${dateObject.year}-${dateObject.month + 1}-${dateObject.day}`);

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

@@ -700,6 +700,66 @@
 
         });
 
+        describe('auto-open-disabled', () => {
+
+          beforeEach(() => {
+            datepicker.autoOpenDisabled = true;
+          });
+
+          it('should not open overlay on input', () => {
+            inputChar('j');
+            expect(datepicker.opened).not.to.be.true;
+          });
+
+          it('should set datepicker value on blur', () => {
+            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 entered', () => {
+            inputChar('1/1/2000');
+            datepicker.dispatchEvent(new Event('blur'));
+            expect(datepicker.invalid).not.to.be.true;
+          });
+
+          it('should revert input value on esc when overlay not initialized', () => {
+            inputChar('1/1/2000');
+            esc();
+            expect(datepicker._inputValue).to.equal('');
+            expect(datepicker.value).to.equal('');
+          });
+
+          it('should revert input value on esc when overlay has been initialized', () => {
+            datepicker.open();
+            datepicker.close();
+            inputChar('1/1/2000');
+            esc();
+            expect(datepicker._inputValue).to.equal('');
+            expect(datepicker.value).to.equal('');
+          });
+
+          it('should apply the input value on enter when overlay not initialized', () => {
+            inputChar('1/1/2000');
+            enter();
+            expect(datepicker.value).to.equal('2000-01-01');
+          });
+
+          it('should apply input value on enter when overlay has been initialized', () => {
+            datepicker.open();
+            datepicker.close();
+            inputChar('1/1/2000');
+            esc();
+            expect(datepicker.value).to.equal('');
+          });
+
+          it('should be invalid on enter with false input', () => {
+            inputChar('foo');
+            enter();
+            expect(datepicker.value).to.equal('');
+            expect(datepicker.invalid).to.be.true;
+          });
+        });
       });
     }
   </script>

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;