Merge pull request #290 from github/ensure-updating-doesnt-hang-updates

ensure #updating doesnt hang updates

Author: keithamus

examples/index.html

@@ -193,6 +193,13 @@ <h2>Localised Dates</h2>
     </relative-time>
   </p>
 
+  <p>
+    Lazily added datetime via setAttribute
+    <relative-time id="lazy" tense="past">
+      This will display in one second.
+    </relative-time>
+  </p>
+
   <!-- <script type="module" src="../dist/index.js"></script> -->
   <script type="module" src="https://unpkg.com/@github/relative-time-element@latest/dist/bundle.js"></script>
   <script>
@@ -203,6 +210,9 @@ <h2>Localised Dates</h2>
     document.getElementById('dynamic2').date = new Date(Date.now() - 30000)
     document.getElementById('dynamic3').date = new Date(Date.now() + 5000)
     document.getElementById('dynamic4').date = new Date()
+    setTimeout(() => {
+      document.getElementById('lazy').setAttribute('datetime', new Date().toJSON())
+    }, 1000)
   </script>
 </body>
 </html>

src/relative-time-element.ts

@@ -426,6 +426,7 @@ export class RelativeTimeElement extends HTMLElement implements Intl.DateTimeFor
       this.#updating = (async () => {
         await Promise.resolve()
         this.update()
+        this.#updating = false
       })()
     }
   }
@@ -472,7 +473,6 @@ export class RelativeTimeElement extends HTMLElement implements Intl.DateTimeFor
     } else {
       dateObserver.unobserve(this)
     }
-    this.#updating = false
   }
 }
 

test/relative-time.js

@@ -70,6 +70,15 @@ suite('relative-time', function () {
     assert.equal(counter, 1)
   })
 
+  test('calls update even after nullish datetime', async () => {
+    const el = document.createElement('relative-time')
+    el.setAttribute('datetime', '')
+    await new Promise(resolve => setTimeout(resolve, 10))
+    el.setAttribute('datetime', new Date().toISOString())
+    await Promise.resolve()
+    assert(el.shadowRoot.textContent.length > 0, 'should have set time, but textContent is empty')
+  })
+
   test('sets title back to default if removed', async () => {
     const el = document.createElement('relative-time')
     el.setAttribute('datetime', new Date().toISOString())