Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor: simplify _hasInputValue workaround, improve JSDoc #5645

Merged
merged 1 commit into from
Mar 10, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
44 changes: 38 additions & 6 deletions packages/date-picker/src/vaadin-date-picker-mixin.js
Original file line number Diff line number Diff line change
Expand Up @@ -328,6 +328,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,
},
};
}

Expand All @@ -353,6 +367,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,
Expand Down Expand Up @@ -908,9 +946,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 */
Expand Down Expand Up @@ -976,9 +1011,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 }));
Expand Down
5 changes: 1 addition & 4 deletions packages/field-base/src/input-mixin.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
*/
Expand Down