I use a paper-input within a dom-if template that utilizes the error-message and invalid parameters. Both are filled by a function, e.g., error-message="[[_getErrorMessage(_value)]]". Within that function I use the parameter this._value and would expect the new value there. However, it is the previous value, e.g., when changing from "123" to "1234", this._value is "123".
This works as intended once the template surrounding the paper-input is removed. The argument that is given to the function is also the current value, but not when I access this._value, which is the workaround I'm currently using in my project.
Expected outcome
Within the observing functions, this._value should be at the most current value.
Actual outcome
this._value contains the value of the paper-input before the change
Live Demo
import '@polymer/polymer/polymer-legacy.js';
import {PolymerElement, html} from '@polymer/polymer/polymer-element.js';
import '@polymer/paper-input/paper-input';
class Test extends PolymerElement {
static get is() {
return 'my-element';
}
static get template() {
return html`
<template is="dom-if" if="[[_getTrue()]]">
<paper-input class="form-input" value="{{_value}}" error-message="[[_getErrorMessage(_value)]]" invalid="[[_isInvalid(_value)]]"></paper-input>
</template>
`;
}
static get properties() {
return {
_value: {
type: 'String',
value: ''
}
}
}
_getTrue() {
return true;
}
_getErrorMessage() {
if ((this._value.length % 2) === 0) {
return 'Even length is not allowed!';
}
else {
return '';
}
}
_isInvalid() {
return this._getErrorMessage() !== '';
}
}
Steps to reproduce
Enter text into the input. After entering the first letter, the length should be even, thus no error, but an error occurs anyway. Any following modification will result in no error, even if it is erroneous. As such, the error handling is always one modification late.
Description
I use a paper-input within a dom-if template that utilizes the error-message and invalid parameters. Both are filled by a function, e.g.,
error-message="[[_getErrorMessage(_value)]]". Within that function I use the parameter this._value and would expect the new value there. However, it is the previous value, e.g., when changing from "123" to "1234", this._value is "123".This works as intended once the template surrounding the paper-input is removed. The argument that is given to the function is also the current value, but not when I access this._value, which is the workaround I'm currently using in my project.
Expected outcome
Within the observing functions, this._value should be at the most current value.
Actual outcome
this._value contains the value of the paper-input before the change
Live Demo
Steps to reproduce
Enter text into the input. After entering the first letter, the length should be even, thus no error, but an error occurs anyway. Any following modification will result in no error, even if it is erroneous. As such, the error handling is always one modification late.
Browsers Affected