feat(input): add input character counter change listener

sinfin · May 24, 2024 · 5936ded · 5936ded
1 parent 5807e1d
commit 5936ded
Showing 1 changed file with 9 additions and 0 deletions.
diff --git a/app/assets/javascripts/folio/input/character_counter.js b/app/assets/javascripts/folio/input/character_counter.js
@@ -42,6 +42,7 @@ window.Folio.Stimulus.register('f-input-character-counter', class extends window
 
   addElementToFormGroup () {
     const formGroup = this.element.closest('.form-group')
+    const input = formGroup.querySelector('input, textarea')
 
     if (!formGroup) {
       throw new Error('Missing parent form-group element.')
@@ -84,6 +85,8 @@ window.Folio.Stimulus.register('f-input-character-counter', class extends window
       }
     }
 
+    this.bindChangeEventListener(input)
+
     wrap.appendChild(document.createTextNode(` ${Folio.i18n(window.Folio.Input.CharacterCounter.i18n, 'shortForCharacter')}`))
 
     this.element.insertAdjacentElement('afterend', wrap)
@@ -97,4 +100,10 @@ window.Folio.Stimulus.register('f-input-character-counter', class extends window
     if (!wrap.parentNode) return
     wrap.parentNode.removeChild(wrap)
   }
+
+  bindChangeEventListener (input) {
+    if (input) {
+      input.addEventListener('change', this.onInput.bind(this))
+    }
+  }
 })