Merge pull request #381 from mauromascarenhas/character-counter-length

Replace character counter "data-length" attribute
materializecss · Jun 22, 2023 · ee68fac · ee68fac
2 parents dfd4a61 + c5c1b4b
commit ee68fac
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 9 deletions.
diff --git a/docs/js/init.js b/docs/js/init.js
@@ -226,7 +226,7 @@ document.addEventListener("DOMContentLoaded", function() {
 
   M.FormSelect.init(document.querySelectorAll('select:not(.disabled)'), {});
 
-  M.CharacterCounter.init(document.querySelectorAll('input[data-length], textarea[data-length]'), {});
+  M.CharacterCounter.init(document.querySelectorAll('input[maxlength], textarea[maxlength]'), {});
 
   const autocompleteDemoData = [
     {id: 12, text: "Apple"},

diff --git a/pug/contents/text_inputs_content.html b/pug/contents/text_inputs_content.html
@@ -404,17 +404,24 @@ <h3 class="header">File Input</h3>
       <div id="character-counter" class="section scrollspy">
         <h3 class="header">Character Counter</h3>
         <p class="caption">Use a character counter in fields where a character restriction is in place.</p>
+        <div class="row">
+          <div class="col s12">
+            <div class="card-panel yellow black-text">
+              <strong><b>Important:</b></strong> The "data-length" attribute has been depracated in favour of "maxlength" in v2.x.
+            </div>
+          </div>
+        </div>
         <div class="row">
           <form class="col s12">
             <div class="row">
               <div class="input-field col s6">
-                <input id="input_text" type="text" data-length="10">
+                <input id="input_text" type="text" maxlength="10">
                 <label for="input_text">Input text</label>
               </div>
             </div>
             <div class="row">
               <div class="input-field col s12">
-                <textarea id="textarea2" class="materialize-textarea" data-length="120"></textarea>
+                <textarea id="textarea2" class="materialize-textarea" maxlength="120"></textarea>
                 <label for="textarea2">Textarea</label>
               </div>
             </div>
@@ -425,13 +432,13 @@ <h3 class="header">Character Counter</h3>
       &lt;form class="col s12">
         &lt;div class="row">
           &lt;div class="input-field col s6">
-            &lt;input id="input_text" type="text" data-length="10">
+            &lt;input id="input_text" type="text" maxlength="10">
             &lt;label for="input_text">Input text&lt;/label>
           &lt;/div>
         &lt;/div>
         &lt;div class="row">
           &lt;div class="input-field col s12">
-            &lt;textarea id="textarea2" class="materialize-textarea" data-length="120">&lt;/textarea>
+            &lt;textarea id="textarea2" class="materialize-textarea" maxlength="120">&lt;/textarea>
             &lt;label for="textarea2">Textarea&lt;/label>
           &lt;/div>
         &lt;/div>
@@ -443,8 +450,9 @@ <h3 class="header">Character Counter</h3>
         <h5>Initialization</h5>
         <p>There are no options for this plugin, but if you are adding these dynamically, you can use this to initialize them.</p>
         <pre><code class="language-javascript">
-  $(document).ready(function() {
-    $('input#input_text, textarea#textarea2').characterCounter();
+  document.addEventListener('DOMContentLoaded', function() {
+    var elems = document.querySelectorAll('input#input_text, textarea#textarea2');
+    var instances = M.CharacterCounter.init(elems);
   });
         </code></pre>
       </div>

diff --git a/src/characterCounter.ts b/src/characterCounter.ts
@@ -60,7 +60,7 @@ export class CharacterCounter extends Component {
   }
 
   updateCounter = () => {
-    let maxLength = parseInt(this.el.getAttribute('data-length')),
+    let maxLength = parseInt(this.el.getAttribute('maxlength')),
       actualLength = (this.el as HTMLInputElement).value.length;
 
     this.isValidLength = actualLength <= maxLength;

diff --git a/tests/spec/forms/formsFixture.html b/tests/spec/forms/formsFixture.html
@@ -2,6 +2,10 @@
   <label for="text-input">text</label>
   <input id="text-input" type="text" />
 </div>
+<div class="input-field">
+  <label for="character-counter">character counter</label>
+  <input id="character-counter" type="text" maxlength="10" />
+</div>
 <div class="input-field">
   <label for="no-type-attribute">no type attribute</label>
   <input id="no-type-attribute" />

diff --git a/tests/spec/forms/formsSpec.js b/tests/spec/forms/formsSpec.js
@@ -1,6 +1,7 @@
 describe('Forms:', function() {
   beforeEach(async function() {
     await XloadFixtures(['forms/formsFixture.html']);
+    M.CharacterCounter.init(document.querySelector("#character-counter"));
   });
 
   afterEach(function(){
@@ -11,10 +12,26 @@ describe('Forms:', function() {
 
   beforeEach(function() {
     inputs = document.querySelectorAll('input');
-    inputs.forEach(input => input.blur())
+    inputs.forEach((input) => {
+      input.focus();
+      input.blur();
+    });
     window.location.hash = "";
   });
 
+  describe("CharacterCounter", () => {
+    it("Should initialize", () => {
+      let el = document.querySelector("#character-counter");
+      expect(() => M.CharacterCounter.getInstance(el)).not.toThrow();
+      expect(M.CharacterCounter.getInstance(el)).toBeTruthy();
+    });
+
+    it("Should exhibit counter", () => {
+      let counter = document.querySelector("#character-counter ~ .character-counter");
+      expect(counter.textContent).toBe("0/10");
+    });    
+  });
+
   describe('TextArea Resize', () => {
     it("Should resize", () => {
       const el = document.querySelector("#textarea");