kmaterialize 2.0.0 → 2.3.3-1.0.0

package/components/textfield/formfields.css

@@ -0,0 +1,311 @@
+/**
+new approach for floating labels aka "form-fields" (css only)
+- also use for selects, autocomplete, etc.
+
+<div class="row g-1 p-3">
+  <!-- Animated -->
+  <fieldset class="form-field animated s12 m4">
+    <legend>Given Name</legend>
+    <input type="text" id="my-input-1" placeholder=" "/>
+    <label for="my-input-1">Given Name</label>
+  </fieldset>
+  <!-- Disabled-->
+  <fieldset class="form-field s12 m4" disabled>
+    <legend>Family Name</legend>
+    <input type="text" id="my-input-2" placeholder="e.g. Doe" />
+    <label for="my-input-2">Family Name</label>
+  </fieldset>
+  <!-- different placeholder than label + required -->
+  <fieldset class="form-field s12 m4">
+    <legend>Birthmonth</legend>
+    <input type="text" id="my-input-3" placeholder="e.g. April" required />
+    <label for="my-input-3">Birthmonth</label>
+  </fieldset>
+</div>
+*/
+
+:root {
+  --mw-font-size: 16px;
+  --mw-border-radius: 8px;
+  --mw-input-height: 56px;
+  --mw-idle-color: var(--md-sys-color-outline);
+  --mw-border-width: 1px;
+  --mw-hover-color: var(--md-sys-color-on-primary-container);
+  --mw-hover-border-width: 1px;
+  --mw-focus-color: var(--md-sys-color-primary);
+  --mw-focus-border-width: 2px;
+  --mw-disabled-color: #8886;
+  --mw-padding-left: 16px;
+  --mw-input-padding-x: var(--mw-padding-left);
+  --mw-input-padding-r: 12px;
+  --mw-label-padding: 4px;
+  --mw-inputlabel-duration: 0.2s;
+  --mw-inset: 5px;
+  /* calclated properties */
+  --label-size: calc(var(--mw-font-size) * 0.75);
+  --label-margin-left: calc(var(--mw-padding-left) - var(--mw-label-padding));
+  --half-inp: calc((-0.5 * var(--mw-input-height)));
+  --half-lbl: calc((0.5 * var(--label-size)));
+  --distY: calc(var(--half-inp) + var(--half-lbl));
+}
+
+/*=== idle */
+fieldset.form-field {
+  position: relative;
+  border-width: var(--mw-border-width);
+  border-color: var(--mw-idle-color);
+  border-style: solid;
+  border-radius: var(--mw-border-radius);
+  cursor: text;
+  height: var(--mw-input-height);
+  user-select: none;
+  padding: 0;
+  margin: 0;
+  display: grid;
+  grid-auto-flow: column;
+  align-items: baseline;
+  font-size: var(--mw-font-size);
+  padding: 0 calc(var(--mw-inset) - var(--mw-border-width));
+}
+fieldset.form-field legend {
+  color: var(--mw-idle-color);
+  font-size: var(--label-size);
+  padding: 0 var(--mw-label-padding);
+  margin: 0;
+  margin-left: calc(var(--mw-padding-left) - var(--mw-label-padding) - var(--mw-border-width));
+  cursor: text;
+  /* color: transparent; */
+  user-select: none;
+}
+fieldset.form-field input,
+fieldset.form-field select {
+  --mw-calc-input-height: calc(
+    var(--mw-input-height) - var(--label-size) + 2 * var(--mw-border-width)
+  );
+  box-sizing: border-box;
+  font-size: var(--mw-font-size);
+  padding: 0;
+  margin: 0;
+  width: 100%;
+  height: var(--mw-calc-input-height);
+  max-height: var(--mw-calc-input-height);
+  margin-top: calc(-1 * var(--half-lbl));
+  padding-left: calc(var(--mw-padding-left) - var(--mw-border-width));
+  border: none;
+  line-height: normal;
+  outline: none;
+  background: none;
+  /* background-color: #0f05 !important; */
+}
+fieldset.form-field select {
+  padding: 0;
+  /* margin: 0; */
+  padding-left: calc(var(--mw-padding-left) - var(--mw-label-padding));
+  /* background-color: #f005 !important; */
+  z-index: 2;
+}
+fieldset.form-field select option {
+  background-color: black;
+  color: white;
+}
+fieldset.form-field input::placeholder {
+  color: var(--mw-idle-color);
+  font-size: var(--mw-font-size);
+}
+fieldset.form-field label {
+  position: absolute;
+  top: calc(var(--mw-input-height) / 2 - var(--label-size) - var(--mw-font-size) / 2);
+  margin-left: calc(var(--mw-inset) - var(--mw-border-width));
+  font-size: var(--mw-font-size);
+  cursor: text;
+  user-select: none;
+  color: transparent;
+  /* color: green; */
+  z-index: 1; /* for not blocking klicks */
+  pointer-events: none;
+}
+
+/* fixes from other inputs */
+fieldset.form-field .select-wrapper {
+  outline: none !important;
+}
+
+/*--- idle animated */
+fieldset.form-field.animated legend::before {
+  content: '';
+  position: absolute;
+  display: block;
+  width: calc(100% - var(--mw-border-radius));
+  right: calc(0.5 * var(--mw-border-radius));
+  height: 0;
+  border-top: var(--mw-border-width) solid var(--mw-idle-color);
+  align-self: center;
+  transition: width calc(var(--mw-inputlabel-duration) * 0.8);
+}
+fieldset.form-field.animated legend {
+  color: transparent;
+}
+fieldset.form-field.animated input::placeholder {
+  opacity: 1;
+  transition: opacity var(--mw-inputlabel-duration) step-end;
+}
+fieldset.form-field.animated label {
+  position: absolute;
+  left: calc(var(--mw-input-padding-x) - var(--mw-border-width));
+  font-size: var(--mw-font-size);
+  transition:
+    font-size var(--mw-inputlabel-duration),
+    transform var(--mw-inputlabel-duration),
+    opacity var(--mw-inputlabel-duration) step-end;
+}
+/*--- idle animated populated */
+fieldset.form-field.animated:has(input:not(:placeholder-shown)) legend::before {
+  width: 0;
+}
+fieldset.form-field.animated:has(input:not(:placeholder-shown)) legend {
+  color: var(--mw-idle-color);
+}
+fieldset.form-field.animated:has(input:not(:placeholder-shown)) label {
+  color: transparent;
+}
+
+/*===== hovered */
+fieldset.form-field:hover {
+  border-width: var(--mw-hover-border-width);
+  border-color: var(--mw-hover-color);
+  padding: 0 calc(var(--mw-inset) - var(--mw-hover-border-width));
+}
+fieldset.form-field:hover legend::before {
+  border-width: var(--mw-hover-border-width);
+  border-color: var(--mw-hover-color);
+}
+fieldset.form-field:hover legend {
+  color: var(--mw-hover-color);
+}
+/* hovered animated */
+fieldset.form-field.animated:hover legend {
+  color: transparent;
+}
+fieldset.form-field.animated:has(input:placeholder-shown):hover input::placeholder {
+  color: transparent;
+}
+fieldset.form-field.animated:has(input:not(:placeholder-shown)):hover legend {
+  color: var(--mw-hover-color);
+}
+fieldset.form-field.animated:hover label {
+  /* color: transparent; */
+  color: var(--mw-hover-color);
+  left: calc(var(--mw-input-padding-x) - var(--mw-hover-border-width));
+  top: calc(
+    0.5 * var(--mw-input-height) - var(--label-size) * 0.5 - var(--mw-font-size) +
+      var(--mw-hover-border-width)
+  );
+}
+
+/*===== focused */
+fieldset.form-field:focus-within {
+  border-width: var(--mw-focus-border-width);
+  border-color: var(--mw-focus-color);
+  padding: 0 calc(var(--mw-inset) - var(--mw-focus-border-width));
+}
+fieldset.form-field:focus-within legend::before {
+  border-width: var(--mw-focus-border-width);
+  border-color: var(--mw-focus-color);
+}
+fieldset.form-field:focus-within legend {
+  color: var(--mw-focus-color);
+}
+fieldset.form-field select:focus {
+  color: var(--mw-focus-color);
+}
+/* focused animated */
+fieldset.form-field.animated:focus-within legend::before {
+  width: 0;
+}
+fieldset.form-field.animated:focus-within legend {
+  color: var(--mw-focus-color);
+}
+fieldset.form-field.animated:has(input:not(:placeholder-shown)):focus-within legend {
+  color: var(--mw-focus-color);
+}
+fieldset.form-field.animated:focus-within input::placeholder {
+  color: transparent;
+}
+fieldset.form-field.animated:focus-within label {
+  color: transparent;
+  left: calc(var(--mw-input-padding-x) - var(--mw-hover-border-width));
+}
+
+/*
+fieldset.form-field.animated input:not(:placeholder-shown) ~ legend::before {
+  width: 0;
+}
+fieldset.form-field.animated input:not(:placeholder-shown) ~ label {
+  font-size: var(--label-size);
+  transform: translateY(0);
+  opacity: 1;
+}
+fieldset.form-field.animated label {
+  opacity: 1;
+  color: var(--mw-focus-color);
+  font-size: var(--label-size);
+  transform: translateY(var(--distY)) translateX(var(--mw-input-padding-x));
+  transition: font-size var(--mw-inputlabel-duration), transform var(--mw-inputlabel-duration), opacity 0s;
+}
+fieldset.form-field.animated:focus-within legend::before,
+fieldset.form-field.animated:has(input:not(:placeholder-shown)) legend::before {
+  border-top: var(--mw-focus-border-width) solid var(--mw-focus-color);
+  width: 0;
+}
+fieldset.form-field.animated:focus-within input::placeholder {
+  opacity: 0;
+  transition: opacity 0s;
+}
+*/
+
+/* disabled*/
+fieldset.form-field[disabled],
+fieldset.form-field[disabled]:hover {
+  background-color: transparent;
+  border-color: var(--mw-disabled-color);
+  user-select: none;
+  cursor: not-allowed;
+  padding: 0 calc(var(--mw-inset) - var(--mw-border-width));
+}
+fieldset.form-field[disabled] input {
+  cursor: not-allowed;
+}
+fieldset.form-field[disabled] legend,
+fieldset.form-field[disabled] input::placeholder {
+  color: var(--mw-disabled-color);
+  cursor: not-allowed;
+}
+fieldset.form-field[disabled] input {
+  height: calc(var(--mw-input-height) - var(--label-size) + 2 * var(--mw-border-width));
+  margin-top: calc(-1 * var(--half-lbl));
+}
+fieldset.form-field[disabled]:hover {
+  border-width: var(--mw-border-width);
+}
+fieldset.form-field[disabled]:hover input,
+fieldset.form-field[disabled]:hover select {
+  padding-left: calc(var(--mw-padding-left) - var(--mw-border-width));
+}
+fieldset.form-field[disabled]:hover legend {
+  margin-left: calc(var(--mw-padding-left) - var(--mw-label-padding) - var(--mw-border-width));
+  border-color: transparent;
+  border-color: var(--mw-disabled-color);
+  color: var(--mw-disabled-color);
+  cursor: not-allowed;
+}
+fieldset.form-field[disabled] label {
+  cursor: not-allowed;
+}
+
+/* special: required */
+fieldset.form-field:has([required]) legend::after {
+  content: ' *';
+}
+fieldset.form-field:has([required]) label::after {
+  content: ' *';
+}

package/components/textfield/forms.ts

@@ -0,0 +1,182 @@
+import { Utils } from '../../src/utils';
+
+export class Forms {
+  /**
+   * Checks if the label has validation and apply
+   * the correct class and styles
+   * @param textfield
+   */
+  static validateField(textfield: HTMLInputElement) {
+    if (!textfield) {
+      console.error('No text field element found');
+      return;
+    }
+
+    const hasLength = textfield.getAttribute('data-length') !== null;
+    const lenAttr = parseInt(textfield.getAttribute('data-length'));
+    const len = textfield.value.length;
+
+    if (
+      len === 0 &&
+      textfield.validity.badInput === false &&
+      !textfield.required &&
+      textfield.classList.contains('validate')
+    ) {
+      textfield.classList.remove('invalid');
+    } else if (textfield.classList.contains('validate')) {
+      // Check for character counter attributes
+      if (
+        (textfield.validity.valid && hasLength && len <= lenAttr) ||
+        (textfield.validity.valid && !hasLength)
+      ) {
+        textfield.classList.remove('invalid');
+      } else {
+        textfield.classList.add('invalid');
+      }
+    }
+  }
+
+  /**
+   * Resizes the given TextArea after updating the
+   *  value content dynamically.
+   * @param e EventTarget
+   */
+  static textareaAutoResize(e: EventTarget) {
+    const textarea = e as HTMLTextAreaElement;
+    // if (!textarea) {
+    //   console.error('No textarea element found');
+    //   return;
+    // }
+    // Textarea Auto Resize
+    let hiddenDiv: HTMLDivElement = document.querySelector('.hiddendiv');
+    if (!hiddenDiv) {
+      hiddenDiv = document.createElement('div');
+      hiddenDiv.classList.add('hiddendiv', 'common');
+      document.body.append(hiddenDiv);
+    }
+    const style = getComputedStyle(textarea);
+    // Set font properties of hiddenDiv
+    const fontFamily = style.fontFamily; //textarea.css('font-family');
+    const fontSize = style.fontSize; //textarea.css('font-size');
+    const lineHeight = style.lineHeight; //textarea.css('line-height');
+    // Firefox can't handle padding shorthand.
+    const paddingTop = style.paddingTop; //getComputedStyle(textarea).css('padding-top');
+    const paddingRight = style.paddingRight; //textarea.css('padding-right');
+    const paddingBottom = style.paddingBottom; //textarea.css('padding-bottom');
+    const paddingLeft = style.paddingLeft; //textarea.css('padding-left');
+
+    if (fontSize) hiddenDiv.style.fontSize = fontSize; //('font-size', fontSize);
+    if (fontFamily) hiddenDiv.style.fontFamily = fontFamily; //css('font-family', fontFamily);
+    if (lineHeight) hiddenDiv.style.lineHeight = lineHeight; //css('line-height', lineHeight);
+    if (paddingTop) hiddenDiv.style.paddingTop = paddingTop; //ss('padding-top', paddingTop);
+    if (paddingRight) hiddenDiv.style.paddingRight = paddingRight; //css('padding-right', paddingRight);
+    if (paddingBottom) hiddenDiv.style.paddingBottom = paddingBottom; //css('padding-bottom', paddingBottom);
+    if (paddingLeft) hiddenDiv.style.paddingLeft = paddingLeft; //css('padding-left', paddingLeft);
+
+    // Set original-height, if none
+    if (!textarea.hasAttribute('original-height'))
+      textarea.setAttribute('original-height', textarea.getBoundingClientRect().height.toString());
+
+    if (textarea.getAttribute('wrap') === 'off') {
+      hiddenDiv.style.overflowWrap = 'normal'; // ('overflow-wrap', 'normal')
+      hiddenDiv.style.whiteSpace = 'pre'; //.css('white-space', 'pre');
+    }
+
+    hiddenDiv.innerText = textarea.value + '\n';
+    hiddenDiv.innerHTML = hiddenDiv.innerHTML.replace(/\n/g, '<br>');
+
+    // When textarea is hidden, width goes crazy.
+    // Approximate with half of window size
+    if (textarea.offsetWidth > 0 && textarea.offsetHeight > 0) {
+      hiddenDiv.style.width = textarea.getBoundingClientRect().width + 'px'; // ('width', textarea.width() + 'px');
+    } else {
+      hiddenDiv.style.width = window.innerWidth / 2 + 'px'; //css('width', window.innerWidth / 2 + 'px');
+    }
+
+    // Resize if the new height is greater than the
+    // original height of the textarea
+    const originalHeight = parseInt(textarea.getAttribute('original-height'));
+    const prevLength = parseInt(textarea.getAttribute('previous-length'));
+    if (isNaN(originalHeight)) return;
+    if (originalHeight <= hiddenDiv.clientHeight) {
+      textarea.style.height = hiddenDiv.clientHeight + 'px'; //css('height', hiddenDiv.innerHeight() + 'px');
+    } else if (textarea.value.length < prevLength) {
+      // In case the new height is less than original height, it
+      // means the textarea has less text than before
+      // So we set the height to the original one
+      textarea.style.height = originalHeight + 'px';
+    }
+    textarea.setAttribute('previous-length', (textarea.value || '').length.toString());
+  }
+
+  static Init() {
+    if (typeof document !== 'undefined')
+      document?.addEventListener('DOMContentLoaded', () => {
+        document.addEventListener('change', (e: KeyboardEvent) => {
+          const target = <HTMLInputElement>e.target;
+          if (target instanceof HTMLInputElement) {
+            if (target.value.length !== 0 || target.getAttribute('placeholder') !== null) {
+              for (const child of target.parentNode.children) {
+                if (child.tagName == 'label') {
+                  child.classList.add('active');
+                }
+              }
+            }
+            Forms.validateField(target);
+          }
+        });
+
+        document.addEventListener('keyup', (e: KeyboardEvent) => {
+          const target = <HTMLInputElement>e.target;
+          // Radio and Checkbox focus class
+          if (target instanceof HTMLInputElement && ['radio', 'checkbox'].includes(target.type)) {
+            // TAB, check if tabbing to radio or checkbox.
+            if (Utils.keys.TAB.includes(e.key)) {
+              target.classList.add('tabbed');
+              target.addEventListener('blur', () => target.classList.remove('tabbed'), {
+                once: true
+              });
+            }
+          }
+        });
+
+        document
+          .querySelectorAll('.materialize-textarea')
+          .forEach((textArea: HTMLTextAreaElement) => {
+            Forms.InitTextarea(textArea);
+          });
+
+        // File Input Path
+        document
+          .querySelectorAll('.file-field input[type="file"]')
+          .forEach((fileInput: HTMLInputElement) => {
+            Forms.InitFileInputPath(fileInput);
+          });
+      });
+  }
+
+  static InitTextarea(textarea: HTMLTextAreaElement) {
+    // Save Data in Element
+    textarea.setAttribute('original-height', textarea.getBoundingClientRect().height.toString());
+    textarea.setAttribute('previous-length', (textarea.value || '').length.toString());
+    Forms.textareaAutoResize(textarea);
+    textarea.addEventListener('keyup', (e) => Forms.textareaAutoResize(e.target));
+    textarea.addEventListener('keydown', (e) => Forms.textareaAutoResize(e.target));
+  }
+
+  static InitFileInputPath(fileInput: HTMLInputElement) {
+    fileInput.addEventListener('change', () => {
+      const fileField = fileInput.closest('.file-field');
+      const pathInput = <HTMLInputElement>fileField.querySelector('input.file-path');
+      const files = fileInput.files;
+      const filenames = [];
+      for (let i = 0; i < files.length; i++) {
+        filenames.push(files[i].name);
+      }
+      pathInput.value = filenames.join(', ');
+      pathInput.dispatchEvent(
+        new Event('change', { bubbles: true, cancelable: true, composed: true })
+      );
+    });
+  }
+}

package/components/textfield/formsSpec.js

@@ -0,0 +1,142 @@
+const MULTILINE_TEXT =
+  'This is line 1.\nThis is line 2.\nThis is line 3.\nThis is line 4.\nThis is line 5.\nAnd this is line 6.';
+
+describe('Forms:', () => {
+  const fixture = `<div class="input-field">
+  <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" />
+</div>
+<div class="input-field">
+  <label for="password-input">password</label>
+  <input id="password-input" type="password" />
+</div>
+<div class="input-field">
+  <label for="email-input">email</label>
+  <input id="email-input" type="email" />
+</div>
+<div class="input-field">
+  <label for="url-input">url</label>
+  <input id="url-input" type="url" />
+</div>
+<div class="input-field">
+  <label for="tel-input">tel</label>
+  <input id="tel-input" type="tel" />
+</div>
+<div class="input-field">
+  <label for="number-input">number</label>
+  <input id="number-input" type="number" />
+</div>
+<div class="input-field">
+  <label for="search-input">search</label>
+  <input id="search-input" type="search" />
+</div>
+<div class="input-field">
+  <label for="date-input">date</label>
+  <input id="date-input" type="date" />
+</div>
+<div class="input-field">
+  <label for="time-input">time</label>
+  <input id="time-input" type="time" />
+</div>
+<div class="input-field">
+  <label for="month-input">month</label>
+  <input id="month-input" type="month" />
+</div>
+<div class="input-field">
+  <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>
+`;
+
+  beforeEach(() => {
+    XloadHtml(fixture);
+    M.CharacterCounter.init(document.querySelector('#character-counter'));
+    const inputs = document.querySelectorAll('input');
+    inputs.forEach((input) => {
+      //input.dispatchEvent(new Event('focus'));
+      focus(input);
+      //input.focus();
+      //input.blur();
+    });
+  });
+  afterEach(() => XunloadFixtures());
+
+  describe('CharacterCounter', () => {
+    it('Should initialize', () => {
+      const el = document.querySelector('#character-counter');
+      expect(() => M.CharacterCounter.getInstance(el)).not.toThrow();
+      expect(M.CharacterCounter.getInstance(el)).toBeTruthy();
+    });
+
+    it('Should exhibit counter', () => {
+      const counter = document.querySelector('#character-counter ~ .character-counter');
+      expect(counter.textContent).toBe('0/10');
+    });
+  });
+
+  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);
+    });
+
+    it('Programmatically initialized textarea resize', (done) => {
+      const element = document.querySelector('#textarea');
+      M.Forms.InitTextarea(element);
+      const textareaHeight = element.clientHeight;
+      element.value = MULTILINE_TEXT;
+      keydown(element, 13);
+      setTimeout(() => {
+        expect(element.clientHeight).toBeGreaterThan(textareaHeight);
+        done();
+      }, 10);
+    });
+
+    it('Automatically initialized textarea resize', (done) => {
+      const event = new Event('DOMContentLoaded');
+      document.dispatchEvent(event);
+      const element = document.querySelector('#textarea');
+      const textareaHeight = element.clientHeight;
+      element.value = MULTILINE_TEXT;
+      keydown(element, 13);
+      setTimeout(() => {
+        expect(element.clientHeight).toBeGreaterThan(textareaHeight);
+        done();
+      }, 10);
+    });
+  });
+
+  // No active class added, because it is now a css feature only
+  /*
+  it("should keep label active while focusing on input", () => {
+    inputs.forEach(input => {
+      expect(input.labels[0]).not.toHaveClass('active')
+      input.focus()
+      expect(input.labels[0]).toHaveClass('active')
+      input.blur()
+      expect(input.labels[0]).not.toHaveClass('active')
+    })
+  });
+  */
+});