fix morph

app/javascript/elements/bar_chart.js

@@ -1,7 +1,10 @@
 export default class extends HTMLElement {
-  static observedAttributes = ['data-labels', 'data-datasets']
-
   connectedCallback () {
+    this.id = `bar-chart-${Math.random().toString(32).split('.')[1]}`
+
+    this.chartLabels = JSON.parse(this.dataset.labels || '[]')
+    this.chartDatasets = JSON.parse(this.dataset.datasets || '[]')
+
     this.initChart()
   }
 
@@ -12,15 +15,6 @@ export default class extends HTMLElement {
     }
   }
 
-  attributeChangedCallback (_, oldValue, newValue) {
-    if (!this.chartInstance || oldValue === newValue) return
-
-    this.chartInstance.data.labels = JSON.parse(this.dataset.labels || '[]')
-    this.chartInstance.data.datasets = JSON.parse(this.dataset.datasets || '[]')
-
-    this.chartInstance.update()
-  }
-
   async initChart () {
     const { default: Chart } = await import(/* webpackChunkName: "chartjs" */ 'chart.js/auto')
 
@@ -31,8 +25,8 @@ export default class extends HTMLElement {
     this.chartInstance = new Chart(ctx, {
       type: 'bar',
       data: {
-        labels: JSON.parse(this.dataset.labels || '[]'),
-        datasets: JSON.parse(this.dataset.datasets || '[]')
+        labels: this.chartLabels,
+        datasets: this.chartDatasets
       },
       options: {
         responsive: true,

app/javascript/elements/email_editor.js

@@ -39,6 +39,8 @@ export default targetable(class extends HTMLElement {
   ]
 
   connectedCallback () {
+    this.id = `email-editor-${Math.random().toString(32).split('.')[1]}`
+
     this.mount()
 
     if (this.input.value) {

app/javascript/elements/html_editor.js

@@ -458,6 +458,8 @@ export default actionable(targetable(class extends HTMLElement {
   async connectedCallback () {
     if (!this.textarea || !this.editorElement) return
 
+    this.id = `html-editor-${Math.random().toString(32).split('.')[1]}`
+
     this.textarea.style.display = 'none'
     this.adjustShortcutsForPlatform()
 

app/javascript/elements/markdown_editor.js

@@ -143,6 +143,8 @@ export default actionable(targetable(class extends HTMLElement {
   async connectedCallback () {
     if (!this.textarea || !this.editorElement) return
 
+    this.id = `markdown-editor-${Math.random().toString(32).split('.')[1]}`
+
     this.textarea.style.display = 'none'
     this.adjustShortcutsForPlatform()
 

app/javascript/elements/masked_input.js

@@ -1,14 +1,13 @@
 export default class extends HTMLElement {
   connectedCallback () {
-    const maskedToken = this.input.value
-
     this.input.addEventListener('focus', () => {
+      this.maskedToken = this.input.value
       this.input.value = this.dataset.token
       this.input.select()
     })
 
     this.input.addEventListener('focusout', () => {
-      this.input.value = maskedToken
+      this.input.value = this.maskedToken
     })
   }
 

app/javascript/elements/menu_active.js

@@ -1,5 +1,7 @@
 export default class extends HTMLElement {
   connectedCallback () {
+    this.id = `menu-active-${Math.random().toString(32).split('.')[1]}`
+
     this.querySelectorAll('a').forEach((link) => {
       if (document.location.pathname.startsWith(link.pathname) && !link.getAttribute('href').startsWith('http')) {
         link.classList.add('bg-base-300')

app/javascript/elements/scroll_fade.js

@@ -1,5 +1,7 @@
 export default class extends HTMLElement {
   connectedCallback () {
+    this.id = `scroll-fade-${Math.random().toString(32).split('.')[1]}`
+
     this.addEventListener('scroll', this.updateFade, { passive: true })
     window.addEventListener('resize', this.updateFade)
 

app/javascript/elements/set_timezone.js

@@ -1,5 +1,7 @@
 export default class extends HTMLElement {
   connectedCallback () {
+    this.id = `set-timezone-${Math.random().toString(32).split('.')[1]}`
+
     if (this.dataset.inputId) {
       const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone