I observed an unexpected behaviour with vaadin-checkbox in html-templates.
The behaviour exists in this tutorial too: https://vaadin.com/learn/tutorials/lit-element
It goes like this:
Generate multiple vaadin-checkboxes in a template.
Every checkbox has a change listener which triggers a filter.
When you mark the checkbox the filter filters the underlying element out.
The change of the property triggers the render-function being called.
The effect:
If you had 3 elements you now see the expected 2 but the checkbox that got the place of the just removed checkbox is checked despite the underlying property says otherwise.
Is this a bug?
I cut the example from the tutorial down to the problem in this stackblitz-page:
[https://stackblitz.com/edit/lit-element-z6i8xk]
(https://stackblitz.com/edit/lit-element-z6i8xk)
import {LitElement, html} from 'lit-element';
import '@vaadin/vaadin-checkbox';
class MyElement extends LitElement {
static get properties() {
return {
todos: {type: Array},
};
}
constructor() {
super();
this.todos = [
{
task: "1",
complete: false
},
{
task: "2",
complete: false
},
{
task: "3",
complete: false
}
];
}
render() {
return html`
${
this.applyFilter(this.todos).map(
todo => html`
<vaadin-checkbox
?checked="${todo.complete}"
@change="${e => this.updateTodoStatus(todo, e.target.checked)}"
>
${todo.task}
</vaadin-checkbox>
`
)
}
`;
}
updateTodoStatus(updatedTodo, complete) {
this.todos = this.todos.map(todo =>
updatedTodo === todo ? {...updatedTodo, complete} : todo
);
}
applyFilter(todos) {
return todos.filter(todo => !todo.complete);
}
}
customElements.define('my-element', MyElement);