[0.6.0-dev.6] firstUpdated never called if first shouldUpdate returned false #172
Description
Description
tl;dr: If the first time
shouldUpdateis called it returns false (no update), the next time it's called and it returns true, the element will be updated,updated()will get called, butfirstUpdated()will never get called.
Tonight I was working with @abdonrd in a migration of some elements based on lit-element from 0.5 to 0.6.0-dev.6, and we have stumbled upon a small bug in the chaining of shouldUpdate - update - updated - firstUpdated lifecycle of lit-element.
Let's say we have an element with need not to render until some external condition is met.
We create a property for the external condition (let's call it readyToUpdate) and in the shouldUpdate method we ask for an update if and only if readyToUpdate is true.
But let's also say that we want to do something just after the first time the element is rendered. Well, we could put that in the firstUpdated method, couldn't we?
But the first time we called shouldUpdated, even if the call returned false, we modified the _updateState of the element, and the second time we modify it again, so the check for needsFirstUpdate gets false, and firstUpdated isn't called.
The problem is in lib/updating-elements.ts in the _validate() method.
Live Demo
on gltch: https://glitch.com/edit/#!/bug-shouldupdate-litelement an
or directly on https://github.com/LostInBrittany/bug-shouldUpdate-LitElement
Look at the console. For the element 1, shouldUpdate returns true, and firstUpdated is called.
For the element 2, shouldUpdate return false. When you click, the readyToUpdate property becomes true, shouldUpdate returns true, the element is updated... but firstUpdated has never been called.
Steps to Reproduce
Create an element that the first time shouldUpdate is called it return false. Even if after that it always return true, firstUpdated is never called.
Expected Results
firstUpdated should be called after the first time the element is updated
Actual Results
firstUpdated is never called.
Browsers Affected
- [x ] Chrome
- Firefox
- Edge
- Safari 11
- [ x] Safari 10
- [ x] IE 11
Versions
- lit-element: v0.6.0-dev.6
- webcomponents: v2.0.0
Thanks again to @abdonrd , it was working together that we understood better how the lifecycle worked on lit-element and found the problem.