feat(input): add input character counter change listener

sinfin · May 24, 2024 · b534570 · b534570
1 parent 5807e1d
commit b534570
Showing 1 changed file with 10 additions and 0 deletions.
diff --git a/app/assets/javascripts/folio/input/character_counter.js b/app/assets/javascripts/folio/input/character_counter.js
@@ -36,12 +36,14 @@ window.Folio.Stimulus.register('f-input-character-counter', class extends window
     if (this.maxValue) {
       wrap.classList.toggle('text-danger', length > this.maxValue)
     }
+    console.log(current)
 
     current.innerText = length
   }
 
   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 +86,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 +101,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))
+    }
+  }
 })