Skip to content

Commit 58a9414

Browse files
Ensure firstUpdated is always called when the element first updated
Fix lit#172
1 parent 43f5953 commit 58a9414

File tree

2 files changed

+55
-2
lines changed

2 files changed

+55
-2
lines changed

src/lib/updating-element.ts

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -510,14 +510,17 @@ export abstract class UpdatingElement extends HTMLElement {
510510
}
511511
this.updated(changedProperties);
512512
} else {
513-
this._markUpdated();
513+
this._markNotUpdated();
514514
}
515515
}
516-
517516
private _markUpdated() {
518517
this._changedProperties = new Map();
519518
this._updateState = this._updateState & ~STATE_UPDATE_REQUESTED | STATE_HAS_UPDATED;
520519
}
520+
private _markNotUpdated() {
521+
this._changedProperties = new Map();
522+
this._updateState = this._updateState & ~STATE_UPDATE_REQUESTED;
523+
}
521524

522525
/**
523526
* Returns a Promise that resolves when the element has completed updating.

src/test/lit-element_test.ts

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1063,6 +1063,56 @@ suite('LitElement', () => {
10631063
assert.equal(el.wasFirstUpdated, 1);
10641064
});
10651065

1066+
test(
1067+
'`firstUpdated` called when element first updates even if first `shouldUpdate` returned false', async () => {
1068+
class E extends LitElement {
1069+
1070+
@property()
1071+
foo = 1;
1072+
1073+
triedToUpdatedCount = 0;
1074+
wasUpdatedCount = 0;
1075+
wasFirstUpdated = 0;
1076+
changedProperties: PropertyValues|undefined;
1077+
1078+
shouldUpdate() {
1079+
this.triedToUpdatedCount++;
1080+
return this.triedToUpdatedCount > 1;
1081+
}
1082+
1083+
update(changedProperties: PropertyValues) {
1084+
this.wasUpdatedCount++;
1085+
super.update(changedProperties);
1086+
}
1087+
1088+
render() { return html ``; }
1089+
1090+
firstUpdated(changedProperties: PropertyValues) {
1091+
this.changedProperties = changedProperties;
1092+
this.wasFirstUpdated++;
1093+
}
1094+
}
1095+
1096+
customElements.define(generateElementName(), E);
1097+
const el = new E();
1098+
container.appendChild(el);
1099+
await el.updateComplete;
1100+
const testMap = new Map();
1101+
testMap.set('foo', undefined);
1102+
assert.equal(el.triedToUpdatedCount, 1);
1103+
assert.equal(el.wasUpdatedCount, 0);
1104+
assert.equal(el.wasFirstUpdated, 0);
1105+
await el.requestUpdate();
1106+
assert.deepEqual(el.changedProperties, testMap);
1107+
assert.equal(el.triedToUpdatedCount, 2);
1108+
assert.equal(el.wasUpdatedCount, 1);
1109+
assert.equal(el.wasFirstUpdated, 1);
1110+
await el.requestUpdate();
1111+
assert.equal(el.triedToUpdatedCount, 3);
1112+
assert.equal(el.wasUpdatedCount, 2);
1113+
assert.equal(el.wasFirstUpdated, 1);
1114+
});
1115+
10661116
test(
10671117
'render lifecycle order', async () => {
10681118
class E extends LitElement {

0 commit comments

Comments
 (0)