Merge pull request #382 from mauromascarenhas/restore-form-functions

Restore form functions

Author: wuda-io

pug/contents/text_inputs_content.html

@@ -308,10 +308,10 @@ <h3 class="header">Textarea</h3>
     &lt;/form>
   &lt;/div>
         </code></pre>
-        <p>advanced note: When dynamically changing the value of a textarea with methods like jQuery's <code class="language-markup">.val()</code>, you must trigger an autoresize on it afterwords because .val() does not automatically trigger the events we've binded to the textarea. </p>
+        <p><strong><b>Advanced note:</b></strong> When dynamically changing the value of a textarea like setting <code class="language-markup">HTMLElement#value</code> attribute, you must trigger an autoresize on it afterwords because simply updating the element's value does not automatically trigger the events we've binded to the textarea.</p>
         <pre><code class="language-javascript">
-  $('#textarea1').val('New Text');
-  M.textareaAutoResize($('#textarea1'));
+  document.querySelector("#textarea1").value = 'New Text';
+  M.Forms.textareaAutoResize(document.querySelector('#textarea1'));
         </code></pre>
 
 

src/forms.ts

@@ -2,7 +2,12 @@ import { M } from "./global";
 
 export class Forms {
 
-  static textareaAutoResize(textarea: HTMLTextAreaElement) {
+  /**
+   * Resizes the given TextArea after updating the
+   *  value content dynamically.
+   * @param textarea TextArea to be resized
+   */
+  static textareaAutoResize(textarea: HTMLTextAreaElement){
     if (!textarea) {
       console.error('No textarea element found');
       return;

src/global.ts

@@ -50,6 +50,7 @@ export class M {
   static Collapsible: typeof Collapsible = Collapsible;
   static Datepicker: typeof Datepicker = Datepicker;
   static CharacterCounter: typeof CharacterCounter = CharacterCounter;
+  static Forms: typeof Forms = Forms;
   static FormSelect: typeof FormSelect = FormSelect;
   static Modal: typeof Modal = Modal;
   static Pushpin: typeof Pushpin = Pushpin;

tests/spec/forms/formsFixture.html

@@ -46,3 +46,7 @@
   <label for="datetime-input">datetime</label>
   <input id="datetime-input" type="datetime-local" />
 </div>
+<div class="input-field">
+  <textarea id="textarea" class="materialize-textarea"></textarea>
+  <label for="textarea">Textarea</label>
+</div>

tests/spec/forms/formsSpec.js

@@ -15,6 +15,22 @@ describe('Forms:', function() {
     window.location.hash = "";
   });
 
+  describe('TextArea Resize', () => {
+    it("Should resize", () => {
+      const el = document.querySelector("#textarea");
+      const pHeight = el.clientHeight;
+      el.value = `
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eleifend urna orci, vitae sagittis ligula maximus quis. Duis eleifend ipsum vitae facilisis tincidunt. Aliquam condimentum consequat ex, ut commodo purus tristique at. Donec malesuada fringilla libero vel sodales. Nulla finibus volutpat lectus a varius. Praesent consequat ornare pulvinar. Quisque nec massa diam.
+        Nunc commodo tempus suscipit. Phasellus iaculis at lorem sit amet venenatis. Curabitur quis felis elementum enim fermentum dapibus. In pretium finibus mollis. Nam aliquet tristique diam sit amet ullamcorper. Suspendisse interdum, est sed aliquam dignissim, dolor augue tristique dui, non luctus felis dolor a dui. Suspendisse lacinia lorem nec enim ultricies maximus. Aenean quam erat, finibus non aliquam nec, pharetra vel metus. Nulla dignissim maximus cursus.
+        Integer massa est, semper eget sem quis, bibendum scelerisque odio. Nam sit amet urna auctor, luctus odio in, semper dui. Sed ut gravida libero, ac consectetur sem. Etiam pharetra pulvinar leo, eget imperdiet purus faucibus in. Cras blandit mi ullamcorper nulla viverra posuere. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec pretium euismod tortor a lacinia. Vivamus ultrices vulputate purus et blandit. Fusce mi quam, consequat vitae pretium sed, tempus at ligula.
+        Suspendisse sodales et dolor vitae sollicitudin. Curabitur sed vestibulum sapien. Integer porttitor pulvinar ullamcorper. Sed ultrices varius augue, at bibendum magna congue sit amet. Nam enim purus, fermentum sed feugiat viverra, accumsan nec diam. Donec a auctor est. Aenean non ante metus. Pellentesque ante ligula, varius vel dignissim in, euismod vel diam. Donec est ante, rhoncus at eros sed, cursus pulvinar enim. In pellentesque, erat eu egestas tempor, ipsum turpis ornare dui, sed fringilla sem lorem in ligula.
+        Integer facilisis arcu eu posuere placerat. Nam vel leo magna. Proin mattis feugiat nisi, quis tincidunt magna pulvinar tincidunt. Aliquam eget nunc sapien. Maecenas vitae orci nunc. Nulla condimentum sapien quis sapien varius suscipit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non finibus nisl, et venenatis massa.
+      `.trim();
+      M.Forms.textareaAutoResize(el);
+      expect(el.clientHeight).toBeGreaterThan(pHeight);
+    });
+  });
+
   // No active class added, because it is now a css feature only
   /*
   it("should keep label active while focusing on input", function () {