Skip to content

Commit

Permalink
refactor: input value getters and setters (#830)
Browse files Browse the repository at this point in the history
  • Loading branch information
@mukherjeesudebi
mukherjeesudebi authored Apr 27, 2023
1 parent 70e5c8d commit ffcf986
Show file tree
Hide file tree
Showing 5 changed files with 66 additions and 40 deletions.
20 changes: 11 additions & 9 deletions src/vaadin-date-picker-light.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
}

Expand Down
63 changes: 48 additions & 15 deletions src/vaadin-date-picker-mixin.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -419,7 +419,7 @@
}
}

if (this._inputElement.value === '' && this.__dispatchChange) {
if (this._inputElementValue === '' && this.__dispatchChange) {
this.validate();
this.value = '';
this.__dispatchChange = false;
Expand Down Expand Up @@ -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)) {
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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;
Expand All @@ -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);

Expand Down Expand Up @@ -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 */
Expand Down Expand Up @@ -993,7 +1026,7 @@
}
this.close();
} else {
if (!isValidDate && this._inputElement.value !== '') {
if (!isValidDate && this._inputElementValue !== '') {
this.validate();
} else {
const oldValue = this.value;
Expand All @@ -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);
Expand All @@ -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);
Expand Down Expand Up @@ -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();
Expand All @@ -1096,7 +1129,7 @@

/** @private */
_userInputValueChanged(value) {
if (this._inputValue) {
if (this._inputElementValue) {
const parsedDate = this._getParsedDate();

if (this._isValidDate(parsedDate)) {
Expand Down
11 changes: 1 addition & 10 deletions src/vaadin-date-picker.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
});
Expand Down Expand Up @@ -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();
Expand Down
2 changes: 1 addition & 1 deletion test/form-input.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down
10 changes: 5 additions & 5 deletions test/keyboard-input.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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', () => {
Expand Down Expand Up @@ -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();
});
});
Expand All @@ -219,7 +219,7 @@

arrowDown();
datepicker.$.overlay.addEventListener('vaadin-overlay-open', () => {
expect(datepicker._inputValue).to.equal('');
expect(datepicker._inputElement.value).to.equal('');
done();
});
});
Expand All @@ -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();
});
});
Expand Down Expand Up @@ -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('');
});

Expand Down

0 comments on commit ffcf986

Please sign in to comment.