@vaadin/field-highlighter 24.8.3 → 24.8.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/field-highlighter",
-  "version": "24.8.3",
+  "version": "24.8.4",
   "publishConfig": {
     "access": "public"
   },
@@ -34,31 +34,31 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/a11y-base": "~24.8.3",
-    "@vaadin/component-base": "~24.8.3",
-    "@vaadin/overlay": "~24.8.3",
-    "@vaadin/vaadin-lumo-styles": "~24.8.3",
-    "@vaadin/vaadin-material-styles": "~24.8.3",
-    "@vaadin/vaadin-themable-mixin": "~24.8.3",
+    "@vaadin/a11y-base": "~24.8.4",
+    "@vaadin/component-base": "~24.8.4",
+    "@vaadin/overlay": "~24.8.4",
+    "@vaadin/vaadin-lumo-styles": "~24.8.4",
+    "@vaadin/vaadin-material-styles": "~24.8.4",
+    "@vaadin/vaadin-themable-mixin": "~24.8.4",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "~24.8.3",
-    "@vaadin/checkbox": "~24.8.3",
-    "@vaadin/checkbox-group": "~24.8.3",
-    "@vaadin/combo-box": "~24.8.3",
-    "@vaadin/date-picker": "~24.8.3",
-    "@vaadin/date-time-picker": "~24.8.3",
-    "@vaadin/item": "~24.8.3",
-    "@vaadin/list-box": "~24.8.3",
-    "@vaadin/radio-group": "~24.8.3",
-    "@vaadin/select": "~24.8.3",
-    "@vaadin/test-runner-commands": "~24.8.3",
+    "@vaadin/chai-plugins": "~24.8.4",
+    "@vaadin/checkbox": "~24.8.4",
+    "@vaadin/checkbox-group": "~24.8.4",
+    "@vaadin/combo-box": "~24.8.4",
+    "@vaadin/date-picker": "~24.8.4",
+    "@vaadin/date-time-picker": "~24.8.4",
+    "@vaadin/item": "~24.8.4",
+    "@vaadin/list-box": "~24.8.4",
+    "@vaadin/radio-group": "~24.8.4",
+    "@vaadin/select": "~24.8.4",
+    "@vaadin/test-runner-commands": "~24.8.4",
     "@vaadin/testing-helpers": "^1.1.0",
-    "@vaadin/text-area": "~24.8.3",
-    "@vaadin/text-field": "~24.8.3",
-    "@vaadin/time-picker": "~24.8.3",
+    "@vaadin/text-area": "~24.8.4",
+    "@vaadin/text-field": "~24.8.4",
+    "@vaadin/time-picker": "~24.8.4",
     "sinon": "^18.0.0"
   },
-  "gitHead": "676ab22dfbf16962cd398734f88105d09344a368"
+  "gitHead": "849e54e967563080a685965e2dced02060b3ab23"
 }

package/src/fields/vaadin-date-picker-observer.js

@@ -3,6 +3,7 @@
  * Copyright (c) 2021 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
+import { isKeyboardActive } from '@vaadin/a11y-base/src/focus-utils.js';
 import { ComponentObserver } from './vaadin-component-observer.js';
 
 export class DatePickerObserver extends ComponentObserver {
@@ -10,7 +11,6 @@ export class DatePickerObserver extends ComponentObserver {
     super(datePicker);
 
     this.datePicker = datePicker;
-    this.fullscreenFocus = false;
     this.blurWhileOpened = false;
 
     this.addListeners(datePicker);
@@ -19,14 +19,6 @@ export class DatePickerObserver extends ComponentObserver {
   addListeners(datePicker) {
     this.overlay = datePicker.$.overlay;
 
-    // Fullscreen date picker calls blur() to avoid focusing of the input:
-    // 1. first time when focus event is fired (before opening the overlay),
-    // 2. second time after the overlay is open, see "_onOverlayOpened".
-    // Here we set the flag to ignore related focusout events and then to
-    // mark date picker as being edited by user (to show field highlight).
-    // We have to use capture phase in order to catch this event early.
-    datePicker.addEventListener('blur', (event) => this.onBlur(event), true);
-
     datePicker.addEventListener('opened-changed', (event) => this.onOpenedChanged(event));
 
     this.overlay.addEventListener('focusout', (event) => this.onOverlayFocusOut(event));
@@ -40,11 +32,9 @@ export class DatePickerObserver extends ComponentObserver {
     return this.datePicker._overlayContent && this.datePicker._overlayContent.contains(node);
   }
 
-  onBlur(event) {
+  isFullscreen() {
     const datePicker = this.datePicker;
-    if (datePicker._fullscreen && !this.isEventInOverlay(event.relatedTarget)) {
-      this.fullscreenFocus = true;
-    }
+    return datePicker._noInput && !isKeyboardActive();
   }
 
   onFocusIn(event) {
@@ -63,7 +53,7 @@ export class DatePickerObserver extends ComponentObserver {
   }
 
   onFocusOut(event) {
-    if (this.fullscreenFocus || this.isEventInOverlay(event.relatedTarget)) {
+    if (this.isEventInOverlay(event.relatedTarget)) {
       // Do nothing, overlay is opening.
     } else if (!this.datePicker.opened) {
       // Field blur when closed.
@@ -83,8 +73,7 @@ export class DatePickerObserver extends ComponentObserver {
   }
 
   onOpenedChanged(event) {
-    if (event.detail.value === true && this.fullscreenFocus) {
-      this.fullscreenFocus = false;
+    if (event.detail.value === true && this.isFullscreen()) {
       this.showOutline(this.datePicker);
     }