refactor: improve _hasInputValue workaround, improve JSDoc (#5645)

vaadin · Mar 10, 2023 · e4df7cf · e4df7cf
1 parent 3512b08
commit e4df7cf
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 10 deletions.
diff --git a/packages/date-picker/src/vaadin-date-picker-mixin.js b/packages/date-picker/src/vaadin-date-picker-mixin.js
@@ -327,6 +327,20 @@ export const DatePickerMixin = (subclass) =>
 
         /** @private */
         _overlayContent: Object,
+
+        /**
+         * In date-picker, unlike other components extending `InputMixin`,
+         * the property indicates true only if the input has been entered by the user.
+         * In the case of programmatic changes, the property is reset to false.
+         * Read more about why this workaround is needed:
+         * https://github.com/vaadin/web-components/issues/5639
+         *
+         * @protected
+         * @override
+         */
+        _hasInputValue: {
+          type: Boolean,
+        },
       };
     }
 
@@ -352,6 +366,30 @@ export const DatePickerMixin = (subclass) =>
       this._boundOverlayRenderer = this._overlayRenderer.bind(this);
     }
 
+    /**
+     * @override
+     * @protected
+     */
+    get _inputElementValue() {
+      return super._inputElementValue;
+    }
+
+    /**
+     * The setter is overridden to reset the `_hasInputValue` property
+     * to false when the input element's value is updated programmatically.
+     * In date-picker, `_hasInputValue` is supposed to indicate true only
+     * if the input has been entered by the user.
+     * Read more about why this workaround is needed:
+     * https://github.com/vaadin/web-components/issues/5639
+     *
+     * @override
+     * @protected
+     */
+    set _inputElementValue(value) {
+      super._inputElementValue = value;
+      this._hasInputValue = false;
+    }
+
     /**
      * Override a getter from `InputControlMixin` to make it optional
      * and to prevent warning when a clear button is missing,
@@ -895,9 +933,6 @@ export const DatePickerMixin = (subclass) =>
     /** @private */
     _applyInputValue(date) {
       this._inputElementValue = date ? this._getFormattedDate(this.i18n.formatDate, date) : '';
-      // It is no longer input entered by the user,
-      // so reset the `hasInputValue` property.
-      this._hasInputValue = false;
     }
 
     /** @private */
@@ -963,9 +998,6 @@ export const DatePickerMixin = (subclass) =>
     _onClearButtonClick(event) {
       event.preventDefault();
       this._inputElementValue = '';
-      // It is no longer input entered by the user,
-      // so reset the `hasInputValue` property.
-      this._hasInputValue = false;
       this.value = '';
       this.validate();
       this.dispatchEvent(new CustomEvent('change', { bubbles: true }));

diff --git a/packages/field-base/src/input-mixin.js b/packages/field-base/src/input-mixin.js
@@ -54,10 +54,7 @@ export const InputMixin = dedupingMixin(
           },
 
           /**
-           * Whether the input element has user input.
-           *
-           * Note, the property indicates true only if the input has been entered by the user.
-           * In the case of programmatic changes, the property must be reset to false.
+           * Whether the input element has a non-empty value.
            *
            * @protected
            */