[0.6.0-dev.6] firstUpdated never called if first shouldUpdate returned false

[LostInBrittany]

Description

tl;dr: If the first time shouldUpdate is 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, but firstUpdated() 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.

[LostInBrittany]

Working on a PR...

[abdonrd]

Thanks to you too, @LostInBrittany! 👏

We find it trying to migrate Qiskit/qiskit.org to the new lit-element API (v0.6.0-dev.6) here:
https://github.com/Qiskit/qiskit.org/compare/update-lit-element

And here in the src/pwa-helpers/localize-mixin.js we find the problems:

https://github.com/Qiskit/qiskit.org/compare/update-lit-element#diff-b6825d49fa8eff2da7ea9069bb2d19f6