@vaadin/date-picker 22.0.0-beta2 → 22.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/date-picker",
-  "version": "22.0.0-beta2",
+  "version": "22.0.2",
   "publishConfig": {
     "access": "public"
   },
@@ -35,21 +35,21 @@
     "@polymer/iron-a11y-announcer": "^3.0.0",
     "@polymer/iron-media-query": "^3.0.0",
     "@polymer/polymer": "^3.2.0",
-    "@vaadin/button": "22.0.0-beta2",
-    "@vaadin/component-base": "22.0.0-beta2",
-    "@vaadin/field-base": "22.0.0-beta2",
-    "@vaadin/input-container": "22.0.0-beta2",
-    "@vaadin/vaadin-lumo-styles": "22.0.0-beta2",
-    "@vaadin/vaadin-material-styles": "22.0.0-beta2",
-    "@vaadin/vaadin-overlay": "22.0.0-beta2",
-    "@vaadin/vaadin-themable-mixin": "22.0.0-beta2"
+    "@vaadin/button": "^22.0.2",
+    "@vaadin/component-base": "^22.0.2",
+    "@vaadin/field-base": "^22.0.2",
+    "@vaadin/input-container": "^22.0.2",
+    "@vaadin/vaadin-lumo-styles": "^22.0.2",
+    "@vaadin/vaadin-material-styles": "^22.0.2",
+    "@vaadin/vaadin-overlay": "^22.0.2",
+    "@vaadin/vaadin-themable-mixin": "^22.0.2"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/dialog": "22.0.0-beta2",
-    "@vaadin/polymer-legacy-adapter": "22.0.0-beta2",
-    "@vaadin/testing-helpers": "^0.3.0",
+    "@vaadin/dialog": "^22.0.2",
+    "@vaadin/polymer-legacy-adapter": "^22.0.2",
+    "@vaadin/testing-helpers": "^0.3.2",
     "sinon": "^9.2.0"
   },
-  "gitHead": "f13833683e6667f6ca6678452db14aa6b7eac4a4"
+  "gitHead": "df21370c4a655a38eac11f79686021ab3b0887ad"
 }

package/src/vaadin-date-picker-light.js

@@ -74,6 +74,7 @@ class DatePickerLight extends ThemableMixin(DatePickerMixin(PolymerElement)) {
         opened="{{opened}}"
         on-vaadin-overlay-open="_onOverlayOpened"
         on-vaadin-overlay-close="_onOverlayClosed"
+        on-vaadin-overlay-outside-click="focus"
         theme$="[[__getOverlayTheme(theme, _overlayInitialized)]]"
       >
         <template>

package/src/vaadin-date-picker-mixin.js

@@ -3,7 +3,7 @@
  * Copyright (c) 2021 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { addListener } from '@polymer/polymer/lib/utils/gestures.js';
+import { isIOS } from '@vaadin/component-base/src/browser-utils.js';
 import { KeyboardMixin } from '@vaadin/component-base/src/keyboard-mixin.js';
 import { DelegateFocusMixin } from '@vaadin/field-base/src/delegate-focus-mixin.js';
 import { InputMixin } from '@vaadin/field-base/src/input-mixin.js';
@@ -301,13 +301,13 @@ export const DatePickerMixin = (subclass) =>
         /** @private */
         _noInput: {
           type: Boolean,
-          computed: '_isNoInput(inputElement, _fullscreen, _ios, i18n, i18n.*)'
+          computed: '_isNoInput(inputElement, _fullscreen, _ios, i18n, opened, autoOpenDisabled)'
         },
 
         /** @private */
         _ios: {
           type: Boolean,
-          value: navigator.userAgent.match(/iP(?:hone|ad;(?: U;)? CPU) OS (\d+)/)
+          value: isIOS
         },
 
         /** @private */
@@ -414,17 +414,11 @@ export const DatePickerMixin = (subclass) =>
     ready() {
       super.ready();
 
-      addListener(this, 'tap', (e) => {
+      this.addEventListener('click', (e) => {
         if (!this._isClearButton(e) && (!this.autoOpenDisabled || this._noInput)) {
           this.open();
         }
       });
-
-      this.addEventListener('touchend', (e) => {
-        if (!this._isClearButton(e)) {
-          e.preventDefault();
-        }
-      });
     }
 
     /** @protected */
@@ -540,8 +534,17 @@ export const DatePickerMixin = (subclass) =>
     }
 
     /** @private */
-    _isNoInput(inputElement, fullscreen, ios, i18n) {
-      return !inputElement || fullscreen || ios || !i18n.parseDate;
+    // eslint-disable-next-line max-params
+    _isNoInput(inputElement, fullscreen, ios, i18n, opened, autoOpenDisabled) {
+      // On fullscreen mode, text input is disabled if auto-open isn't disabled or
+      // whenever the dropdown is opened
+      const noInputOnFullscreenMode = fullscreen && (!autoOpenDisabled || opened);
+      // On iOS, text input is disabled whenever the dropdown is opened, because
+      // the virtual keyboard doesn't affect the viewport metrics and thus the
+      // dropdown could get covered by the keyboard.
+      const noInputOnIos = ios && opened;
+
+      return !inputElement || noInputOnFullscreenMode || noInputOnIos || !i18n.parseDate;
     }
 
     /** @private */

package/src/vaadin-date-picker.js

@@ -10,9 +10,9 @@ import './vaadin-date-picker-overlay-content.js';
 import { GestureEventListeners } from '@polymer/polymer/lib/mixins/gesture-event-listeners.js';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
-import { AriaLabelController } from '@vaadin/field-base/src/aria-label-controller.js';
 import { InputControlMixin } from '@vaadin/field-base/src/input-control-mixin.js';
 import { InputController } from '@vaadin/field-base/src/input-controller.js';
+import { LabelledInputController } from '@vaadin/field-base/src/labelled-input-controller.js';
 import { inputFieldShared } from '@vaadin/field-base/src/styles/input-field-shared-styles.js';
 import { registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import { DatePickerMixin } from './vaadin-date-picker-mixin.js';
@@ -165,6 +165,7 @@ class DatePicker extends DatePickerMixin(
         theme$="[[__getOverlayTheme(theme, _overlayInitialized)]]"
         on-vaadin-overlay-open="_onOverlayOpened"
         on-vaadin-overlay-close="_onOverlayClosed"
+        on-vaadin-overlay-outside-click="focus"
         disable-upgrade
       >
         <template>
@@ -212,7 +213,7 @@ class DatePicker extends DatePickerMixin(
         this.ariaTarget = input;
       })
     );
-    this.addController(new AriaLabelController(this, this.inputElement, this._labelNode));
+    this.addController(new LabelledInputController(this.inputElement, this._labelNode));
   }
 
   /** @private */

package/src/vaadin-infinite-scroller.js

@@ -7,6 +7,7 @@ import { afterNextRender } from '@polymer/polymer/lib/utils/render-status.js';
 import { templatize } from '@polymer/polymer/lib/utils/templatize.js';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { timeOut } from '@vaadin/component-base/src/async.js';
+import { isFirefox } from '@vaadin/component-base/src/browser-utils.js';
 import { Debouncer } from '@vaadin/component-base/src/debounce.js';
 
 /**
@@ -137,7 +138,6 @@ class InfiniteScroller extends PolymerElement {
 
     // Firefox interprets elements with overflow:auto as focusable
     // https://bugzilla.mozilla.org/show_bug.cgi?id=1069739
-    var isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
     if (isFirefox) {
       this.$.scroller.tabIndex = -1;
     }