@vaadin/field-highlighter 25.0.0-alpha7 → 25.0.0-alpha8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/field-highlighter",
-  "version": "25.0.0-alpha7",
+  "version": "25.0.0-alpha8",
   "publishConfig": {
     "access": "public"
   },
@@ -33,29 +33,29 @@
     "field"
   ],
   "dependencies": {
-    "@vaadin/a11y-base": "25.0.0-alpha7",
-    "@vaadin/component-base": "25.0.0-alpha7",
-    "@vaadin/overlay": "25.0.0-alpha7",
-    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha7",
-    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha7",
+    "@vaadin/a11y-base": "25.0.0-alpha8",
+    "@vaadin/component-base": "25.0.0-alpha8",
+    "@vaadin/overlay": "25.0.0-alpha8",
+    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha8",
+    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha8",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "25.0.0-alpha7",
-    "@vaadin/checkbox": "25.0.0-alpha7",
-    "@vaadin/checkbox-group": "25.0.0-alpha7",
-    "@vaadin/date-picker": "25.0.0-alpha7",
-    "@vaadin/date-time-picker": "25.0.0-alpha7",
-    "@vaadin/item": "25.0.0-alpha7",
-    "@vaadin/list-box": "25.0.0-alpha7",
-    "@vaadin/radio-group": "25.0.0-alpha7",
-    "@vaadin/select": "25.0.0-alpha7",
-    "@vaadin/test-runner-commands": "25.0.0-alpha7",
+    "@vaadin/chai-plugins": "25.0.0-alpha8",
+    "@vaadin/checkbox": "25.0.0-alpha8",
+    "@vaadin/checkbox-group": "25.0.0-alpha8",
+    "@vaadin/date-picker": "25.0.0-alpha8",
+    "@vaadin/date-time-picker": "25.0.0-alpha8",
+    "@vaadin/item": "25.0.0-alpha8",
+    "@vaadin/list-box": "25.0.0-alpha8",
+    "@vaadin/radio-group": "25.0.0-alpha8",
+    "@vaadin/select": "25.0.0-alpha8",
+    "@vaadin/test-runner-commands": "25.0.0-alpha8",
     "@vaadin/testing-helpers": "^2.0.0",
-    "@vaadin/text-area": "25.0.0-alpha7",
-    "@vaadin/text-field": "25.0.0-alpha7",
-    "@vaadin/time-picker": "25.0.0-alpha7",
+    "@vaadin/text-area": "25.0.0-alpha8",
+    "@vaadin/text-field": "25.0.0-alpha8",
+    "@vaadin/time-picker": "25.0.0-alpha8",
     "sinon": "^18.0.0"
   },
-  "gitHead": "87f72707ce6866892f8be5782fa0da008e87dcbc"
+  "gitHead": "ebf53673d5f639d2b1b6f2b31f640f530643ee2f"
 }

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,14 +32,17 @@ 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) {
+    if (this.isEventInOverlay(event.target)) {
+      // Focus moves to the overlay, do nothing.
+      return;
+    }
+
     if (this.isEventInOverlay(event.relatedTarget)) {
       // Focus returns from the overlay, do nothing.
       return;
@@ -63,9 +58,17 @@ export class DatePickerObserver extends ComponentObserver {
   }
 
   onFocusOut(event) {
-    if (this.fullscreenFocus || this.isEventInOverlay(event.relatedTarget)) {
-      // Do nothing, overlay is opening.
-    } else if (!this.datePicker.opened) {
+    if (this.isEventInOverlay(event.target) && this.component.contains(event.relatedTarget)) {
+      // Focus returns from the overlay, do nothing.
+      return;
+    }
+
+    if (this.isEventInOverlay(event.relatedTarget)) {
+      // Focus moves to the overlay, do nothing.
+      return;
+    }
+
+    if (!this.datePicker.opened) {
       // Field blur when closed.
       this.hideOutline(this.datePicker);
     } else {
@@ -83,8 +86,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);
     }
 

package/src/fields/vaadin-select-observer.js

@@ -13,7 +13,12 @@ export class SelectObserver extends FieldObserver {
   }
 
   onFocusIn(event) {
-    if (this.overlay.contains(event.relatedTarget)) {
+    if (this.overlay._contentRoot.contains(event.target)) {
+      // Focus moves to the overlay item, do nothing.
+      return;
+    }
+
+    if (this.overlay._contentRoot.contains(event.relatedTarget)) {
       // Focus returns on item select, do nothing.
       return;
     }
@@ -22,10 +27,16 @@ export class SelectObserver extends FieldObserver {
   }
 
   onFocusOut(event) {
-    if (this.overlay.contains(event.relatedTarget)) {
-      // Do nothing, overlay is opening.
+    if (this.overlay._contentRoot.contains(event.relatedTarget)) {
+      // Focus moves to the overlay on opening, do nothing.
       return;
     }
+
+    if (this.overlay._contentRoot.contains(event.target) && this.component.contains(event.relatedTarget)) {
+      // Focus returns from the overlay on closing, do nothing.
+      return;
+    }
+
     super.onFocusOut(event);
   }
 }

package/src/vaadin-field-outline.js

@@ -19,7 +19,7 @@ import { fieldOutlineStyles } from './styles/vaadin-field-outline-core-styles.js
  * @mixes ThemableMixin
  * @private
  */
-export class FieldOutline extends ThemableMixin(DirMixin(LumoInjectionMixin(PolylitMixin(LitElement)))) {
+export class FieldOutline extends ThemableMixin(DirMixin(PolylitMixin(LumoInjectionMixin(LitElement)))) {
   static get is() {
     return 'vaadin-field-outline';
   }

package/src/vaadin-user-tag.js

@@ -20,7 +20,7 @@ import { userTagStyles } from './styles/vaadin-user-tag-core-styles.js';
  * @mixes ThemableMixin
  * @private
  */
-export class UserTag extends ThemableMixin(DirMixin(LumoInjectionMixin(PolylitMixin(LitElement)))) {
+export class UserTag extends ThemableMixin(DirMixin(PolylitMixin(LumoInjectionMixin(LitElement)))) {
   static get is() {
     return 'vaadin-user-tag';
   }

package/src/vaadin-user-tags-overlay.js

@@ -25,7 +25,7 @@ import { userTagsOverlayStyles } from './styles/vaadin-user-tags-overlay-core-st
  * @private
  */
 class UserTagsOverlay extends PositionMixin(
-  OverlayMixin(DirMixin(ThemableMixin(LumoInjectionMixin(PolylitMixin(LitElement))))),
+  OverlayMixin(DirMixin(ThemableMixin(PolylitMixin(LumoInjectionMixin(LitElement))))),
 ) {
   static get is() {
     return 'vaadin-user-tags-overlay';
@@ -38,7 +38,6 @@ class UserTagsOverlay extends PositionMixin(
   /** @protected */
   render() {
     return html`
-      <div id="backdrop" part="backdrop" ?hidden="${!this.withBackdrop}"></div>
       <div part="overlay" id="overlay">
         <div part="content" id="content">
           <slot></slot>