@vaadin/field-base 23.2.0-alpha5 → 23.2.0-beta2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/field-base",
-  "version": "23.2.0-alpha5",
+  "version": "23.2.0-beta2",
   "publishConfig": {
     "access": "public"
   },
@@ -32,7 +32,7 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "23.2.0-alpha5",
+    "@vaadin/component-base": "23.2.0-beta2",
     "lit": "^2.0.0"
   },
   "devDependencies": {
@@ -40,5 +40,5 @@
     "@vaadin/testing-helpers": "^0.3.2",
     "sinon": "^13.0.2"
   },
-  "gitHead": "c6247fd741d61096d75a71feda4a1faf88b6f0ce"
+  "gitHead": "42864949ade7e573ac534a64ecdd97fab32a87fc"
 }

package/src/helper-controller.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 Vaadin Ltd.
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { SlotController } from '@vaadin/component-base/src/slot-controller.js';

package/src/helper-controller.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2021 Vaadin Ltd.
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { SlotController } from '@vaadin/component-base/src/slot-controller.js';

package/src/input-field-mixin.js

@@ -85,15 +85,17 @@ export const InputFieldMixin = (superclass) =>
     }
 
     /**
-     * Override an event listener from `DelegateFocusMixin`.
-     * @param {FocusEvent} event
+     * Override an event listener from `FocusMixin`.
+     * @param {boolean} focused
      * @protected
      * @override
      */
-    _onBlur(event) {
-      super._onBlur(event);
+    _setFocused(focused) {
+      super._setFocused(focused);
 
-      this.validate();
+      if (!focused) {
+        this.validate();
+      }
     }
 
     /**

package/src/input-mixin.js

@@ -52,13 +52,23 @@ export const InputMixin = dedupingMixin(
             observer: '_valueChanged',
             notify: true,
           },
+
+          /**
+           * When true, the input element has a non-empty value entered by the user.
+           * @protected
+           */
+          _hasInputValue: {
+            type: Boolean,
+            value: false,
+            observer: '_hasInputValueChanged',
+          },
         };
       }
 
       constructor() {
         super();
 
-        this._boundOnInput = this._onInput.bind(this);
+        this._boundOnInput = this.__onInput.bind(this);
         this._boundOnChange = this._onChange.bind(this);
       }
 
@@ -126,6 +136,33 @@ export const InputMixin = dedupingMixin(
         }
       }
 
+      /**
+       * Observer to notify about the change of private property.
+       *
+       * @private
+       */
+      _hasInputValueChanged(hasValue, oldHasValue) {
+        if (hasValue || oldHasValue) {
+          this.dispatchEvent(new CustomEvent('has-input-value-changed'));
+        }
+      }
+
+      /**
+       * An input event listener used to update `_hasInputValue` property.
+       * Do not override this method.
+       *
+       * @param {Event} event
+       * @private
+       */
+      __onInput(event) {
+        // In the case a custom web component is passed as `inputElement`,
+        // the actual native input element, on which the event occurred,
+        // can be inside shadow trees.
+        const target = event.composedPath()[0];
+        this._hasInputValue = target.value.length > 0;
+        this._onInput(event);
+      }
+
       /**
        * An input event listener used to update the field value.
        *
@@ -133,9 +170,13 @@ export const InputMixin = dedupingMixin(
        * @protected
        */
       _onInput(event) {
+        // In the case a custom web component is passed as `inputElement`,
+        // the actual native input element, on which the event occurred,
+        // can be inside shadow trees.
+        const target = event.composedPath()[0];
         // Ignore fake input events e.g. used by clear button.
         this.__userInput = event.isTrusted;
-        this.value = event.target.value;
+        this.value = target.value;
         this.__userInput = false;
       }