diff --git a/src/vaadin-date-picker-light.html b/src/vaadin-date-picker-light.html
index 2cfca1e0..9dbf6bc0 100644
--- a/src/vaadin-date-picker-light.html
+++ b/src/vaadin-date-picker-light.html
@@ -151,15 +151,17 @@
return this.querySelector('vaadin-text-field,iron-input,paper-input,.paper-input-input,.input');
}
- set _inputValue(value) {
- if (this._inputElement) {
- this._inputElement[Polymer.CaseMap.dashToCamelCase(this.attrForValue)] = value;
- }
- }
-
- /** @return {string | undefined} */
- get _inputValue() {
- return this._inputElement && this._inputElement[Polymer.CaseMap.dashToCamelCase(this.attrForValue)];
+ /**
+ * The method is overridden to allow the customization of
+ * the input element value property name, which can be
+ * achieved by providing a custom `attrForValue` property.
+ *
+ * @protected
+ * @override
+ * @return {string}
+ */
+ get _inputElementValueProperty() {
+ return Polymer.CaseMap.dashToCamelCase(this.attrForValue);
}
}
diff --git a/src/vaadin-date-picker-mixin.html b/src/vaadin-date-picker-mixin.html
index 2ffa93b3..37a8d1bb 100644
--- a/src/vaadin-date-picker-mixin.html
+++ b/src/vaadin-date-picker-mixin.html
@@ -419,7 +419,7 @@
}
}
- if (this._inputElement.value === '' && this.__dispatchChange) {
+ if (this._inputElementValue === '' && this.__dispatchChange) {
this.validate();
this.value = '';
this.__dispatchChange = false;
@@ -785,7 +785,7 @@
// Select the parsed input or focused date
this._ignoreFocusedDateChange = true;
if (this.i18n.parseDate) {
- const inputValue = this._inputValue || '';
+ const inputValue = this._inputElementValue || '';
const parsedDate = this._getParsedDate(inputValue);
if (this._isValidDate(parsedDate)) {
@@ -828,6 +828,39 @@
}
}
+ /**
+ * A property for accessing the input element's value.
+ *
+ * Override this getter if the property is different from the default `value` one.
+ *
+ * @protected
+ * @return {string}
+ */
+ get _inputElementValueProperty() {
+ return 'value';
+ }
+
+ /**
+ * The input element's value.
+ *
+ * @protected
+ * @return {string}
+ */
+ get _inputElementValue() {
+ return this._inputElement ? this._inputElement[this._inputElementValueProperty] : undefined;
+ }
+
+ /**
+ * The input element's value.
+ *
+ * @protected
+ */
+ set _inputElementValue(value) {
+ if (this._inputElement) {
+ this._inputElement[this._inputElementValueProperty] = value;
+ }
+ }
+
/**
* @param {boolean} invalid
* @protected
@@ -857,10 +890,10 @@
* @return {boolean} True if the value is valid.
*/
validate() {
- // Note (Yuriy): Workaround `this._inputValue` is used in order
- // to avoid breaking change on custom `checkValidity`.
- // Can be removed with next major.
- const isValid = this.checkValidity(this._inputValue);
+ // Note (Yuriy): this._inputElementValue is passed to checkValidity() as an argument to maintain
+ // backward compatibility in case it's being used in a custom implementation of checkValidity().
+ // The workaround can be removed with the next major.
+ const isValid = this.checkValidity(this._inputElementValue);
this._setInvalid(!isValid);
this.dispatchEvent(new CustomEvent('validated', {detail: {valid: isValid}}));
return isValid;
@@ -875,8 +908,8 @@
* @return {boolean} True if the value is valid
*/
checkValidity() {
- const inputValid = !this._inputValue ||
- (this._selectedDate && this._inputValue === this._getFormattedDate(this.i18n.formatDate, this._selectedDate));
+ const inputValid = !this._inputElementValue ||
+ (this._selectedDate && this._inputElementValue === this._getFormattedDate(this.i18n.formatDate, this._selectedDate));
const minMaxValid = !this._selectedDate ||
Vaadin.DatePickerHelper._dateAllowed(this._selectedDate, this._minDate, this._maxDate);
@@ -915,12 +948,12 @@
/** @private */
_focusAndSelect() {
this._focus();
- this._setSelectionRange(0, this._inputValue.length);
+ this._setSelectionRange(0, this._inputElementValue.length);
}
/** @private */
_applyInputValue(date) {
- this._inputValue = date ? this._getFormattedDate(this.i18n.formatDate, date) : '';
+ this._inputElementValue = date ? this._getFormattedDate(this.i18n.formatDate, date) : '';
}
/** @private */
@@ -993,7 +1026,7 @@
}
this.close();
} else {
- if (!isValidDate && this._inputElement.value !== '') {
+ if (!isValidDate && this._inputElementValue !== '') {
this.validate();
} else {
const oldValue = this.value;
@@ -1011,7 +1044,7 @@
this._close();
} else if (this.autoOpenDisabled) {
// Do not restore selected date if Esc was pressed after clearing input field
- if (this._inputElement.value === '') {
+ if (this._inputElementValue === '') {
this._selectedDate = null;
}
this._applyInputValue(this._selectedDate);
@@ -1038,7 +1071,7 @@
}
/** @private */
- _getParsedDate(inputValue = this._inputValue) {
+ _getParsedDate(inputValue = this._inputElementValue) {
const dateObject = this.i18n.parseDate && this.i18n.parseDate(inputValue);
const parsedDate = dateObject &&
this._parseDate(dateObject.year + '-' + (dateObject.month + 1) + '-' + dateObject.day);
@@ -1081,7 +1114,7 @@
/** @private */
_onUserInput(e) {
- if (!this.opened && this._inputElement.value && !this.autoOpenDisabled) {
+ if (!this.opened && this._inputElementValue && !this.autoOpenDisabled) {
this.open();
}
this._userInputValueChanged();
@@ -1096,7 +1129,7 @@
/** @private */
_userInputValueChanged(value) {
- if (this._inputValue) {
+ if (this._inputElementValue) {
const parsedDate = this._getParsedDate();
if (this._isValidDate(parsedDate)) {
diff --git a/src/vaadin-date-picker.html b/src/vaadin-date-picker.html
index ed355566..bccc5217 100644
--- a/src/vaadin-date-picker.html
+++ b/src/vaadin-date-picker.html
@@ -275,7 +275,7 @@
this._inputElement.addEventListener('change', (e) => {
// For change event on text-field blur, after the field is cleared,
// we schedule change event to be dispatched on date-picker blur.
- if (this._inputElement.value === '' && !e.__fromClearButton) {
+ if (this._inputElementValue === '' && !e.__fromClearButton) {
this.__dispatchChange = true;
}
});
@@ -307,15 +307,6 @@
return this.$.input;
}
- set _inputValue(value) {
- this._inputElement.value = value;
- }
-
- /** @return {string} */
- get _inputValue() {
- return this._inputElement.value;
- }
-
/** @private */
_getAriaExpanded(opened) {
return Boolean(opened).toString();
diff --git a/test/form-input.html b/test/form-input.html
index 3efc640b..3d7975dc 100644
--- a/test/form-input.html
+++ b/test/form-input.html
@@ -202,7 +202,7 @@
inputValue('foo');
datepicker.addEventListener('value-changed', () => {
- expect(datepicker._inputValue).to.equal('foo');
+ expect(datepicker._inputElement.value).to.equal('foo');
done();
});
datepicker.close();
diff --git a/test/keyboard-input.html b/test/keyboard-input.html
index 3243195c..e0083b34 100644
--- a/test/keyboard-input.html
+++ b/test/keyboard-input.html
@@ -101,7 +101,7 @@
it('should change focused date on input when closed', (done) => {
datepicker.value = '2000-01-01';
- datepicker._inputValue = '1/30/2000';
+ datepicker._inputElement.value = '1/30/2000';
target.dispatchEvent(new CustomEvent('input', {bubbles: true, composed: true}));
datepicker.$.overlay.addEventListener('vaadin-overlay-open', () => {
@@ -210,7 +210,7 @@
arrowDown();
datepicker.$.overlay.addEventListener('vaadin-overlay-open', () => {
arrowDown();
- expect(datepicker._inputValue).to.equal('1/8/2000');
+ expect(datepicker._inputElement.value).to.equal('1/8/2000');
done();
});
});
@@ -219,7 +219,7 @@
arrowDown();
datepicker.$.overlay.addEventListener('vaadin-overlay-open', () => {
- expect(datepicker._inputValue).to.equal('');
+ expect(datepicker._inputElement.value).to.equal('');
done();
});
});
@@ -232,7 +232,7 @@
arrowDown();
target = getOverlayContent(datepicker);
arrowDown();
- expect(datepicker._inputValue).to.equal('1/15/2000');
+ expect(datepicker._inputElement.value).to.equal('1/15/2000');
done();
});
});
@@ -815,7 +815,7 @@
it('should revert input value on esc when overlay not initialized', () => {
inputText('1/1/2000');
esc();
- expect(datepicker._inputValue).to.equal('');
+ expect(datepicker._inputElement.value).to.equal('');
expect(datepicker.value).to.equal('');
});