From c0d3799e391a3b8c0998f259f66b63e6607b251a Mon Sep 17 00:00:00 2001
From: Keith Cirkel <keithamus@users.noreply.github.com>
Date: Fri, 23 Aug 2024 11:53:43 +0100
Subject: [PATCH] ensure #updating doesnt hang updates

---
 examples/index.html          | 10 ++++++++++
 src/relative-time-element.ts |  2 +-
 test/relative-time.js        |  9 +++++++++
 3 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/examples/index.html b/examples/index.html
index d671479..13d91ba 100644
--- a/examples/index.html
+++ b/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>
diff --git a/src/relative-time-element.ts b/src/relative-time-element.ts
index 660b169..2130065 100644
--- a/src/relative-time-element.ts
+++ b/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
   }
 }
 
diff --git a/test/relative-time.js b/test/relative-time.js
index e139bee..92b3ba5 100644
--- a/test/relative-time.js
+++ b/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())