error-message and invalid update with a previous value when within dom-if

[DrNiels]

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

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.

Browsers Affected

• Chrome
• Firefox
• ? Safari 9
• ? Safari 8
• ? Safari 7
• Edge
• IE 11
• ? IE 10