fix: only move dropdown on init

This fixes also the select issue with the label placement. The impact
is not tested, but in that case we should offer a relocate function to
move the dropdown manually.

Author: wuda-io

sass/components/forms/_input-fields.scss

@@ -23,15 +23,18 @@ textarea.materialize-textarea {
   width: 100%;
   font-size: $md_sys_typescale_body-large_size; //16px; // => 16 dp
   height: 56px; // 56dp
+  background-color: transparent;
 }
 
 %invalid-input-style {
   border-bottom: 2px solid var(--md-sys-color-error);
   box-shadow: 0 1px 0 0 var(--md-sys-color-error);
 }
+
 %hidden-text > span {
   display: none
 }
+
 %custom-error-message {
   content: attr(data-error);
   color: var(--md-sys-color-error);
@@ -47,12 +50,9 @@ textarea.materialize-textarea {
 
   input, textarea {
     box-sizing: border-box; /* https://stackoverflow.com/questions/1377719/padding-within-inputs-breaks-width-100*/
-
     padding: 0 16px;
     padding-top: 20px;
-
-    background-color: var(--md-sys-color-surface);
-
+    //background-color: transparent; //background-color: var(--md-sys-color-surface);
     border: none; // reset
     border-radius: 4px; // md.sys.shape.corner.extra-small.top
     border-bottom: 1px solid var(--md-sys-color-on-surface-variant);
@@ -173,13 +173,14 @@ textarea.materialize-textarea {
 
   // Outlined
 
+  // todo: use this approach for floating labels with outline
+  // https://dev.to/icyjoseph/use-more-html-elements-floating-from-field-37o9
+
   &.outlined {
 
     input, textarea {
       padding-top: 0;
-
-      background-color: var(--md-sys-color-background);
-
+      background-color: transparent; //(--md-sys-color-background);
       border: 1px solid var(--md-sys-color-on-surface-variant);
       border-radius: 4px; // md.sys.shape.corner.extra-small
 
@@ -189,6 +190,7 @@ textarea.materialize-textarea {
         margin-left: -1px; // subtract border-width
 
       }
+
       // Label
       &:focus:not([readonly]) + label {
         color: var(--input-color);
@@ -200,14 +202,13 @@ textarea.materialize-textarea {
         left: 16px;
         margin-left: -4px;
         padding: 0 4px;
-        background-color: var(--md-sys-color-background);
+        background-color: transparent; //var(--md-sys-color-background);
       }
 
       &:disabled, &[readonly="readonly"] {
         color: rgba(var(--md_sys_color_on-surface), 0.38);
         border-color: rgba(var(--md_sys_color_on-surface), 0.12);
       }
-
     }
   }
 
@@ -238,7 +239,6 @@ textarea.materialize-textarea {
 .searchbar {
   .prefix {
     position: absolute;
-    //left: 12px;
     padding-left: 1rem;
     top: 0;
     user-select: none;
@@ -307,7 +307,6 @@ textarea {
   word-wrap: break-word;
   overflow-wrap: break-word; /* future version of deprecated 'word-wrap' */
   padding-top: 1.2rem; /* prevents text jump on Enter keypress */
-
   // Reduces repaints
   position: absolute;
   top: 0;

src/dropdown.ts

@@ -128,7 +128,7 @@ export class Dropdown extends Component<DropdownOptions> implements Openable {
     this.el.ariaExpanded = 'false';
 
     // Move dropdown-content after dropdown-trigger
-    this._moveDropdown();
+    this._moveDropdownToElement();
     this._makeDropdownFocusable();
     this._setupEventHandlers();
   }
@@ -216,7 +216,7 @@ export class Dropdown extends Component<DropdownOptions> implements Openable {
 
   _handleClick = (e: MouseEvent) => {
     e.preventDefault();
-    this._moveDropdown((<HTMLElement>e.target).closest('li'));
+    //this._moveDropdown((<HTMLElement>e.target).closest('li'));
     if (this.isOpen) {
       this.close();
     } else {
@@ -225,7 +225,7 @@ export class Dropdown extends Component<DropdownOptions> implements Openable {
   };
 
   _handleMouseEnter = (e) => {
-    this._moveDropdown((<HTMLElement>e.target).closest('li'));
+    //this._moveDropdown((<HTMLElement>e.target).closest('li'));
     this.open();
   };
 
@@ -388,17 +388,16 @@ export class Dropdown extends Component<DropdownOptions> implements Openable {
     this.dropdownEl.style.transformOrigin = '';
   }
 
-  // Move dropdown after container or trigger
-  _moveDropdown(containerEl: HTMLElement = null) {
-    if (!!this.options.container) {
+  _moveDropdownToElement(containerEl: HTMLElement = null) {
+    if (this.options.container) {
       this.options.container.append(this.dropdownEl);
-    } else if (containerEl) {
-      if (!containerEl.contains(this.dropdownEl)) {
-        containerEl.append(this.dropdownEl);
-      }
-    } else {
-      this.el.after(this.dropdownEl);
+      return;
+    }
+    if (containerEl) {
+      if (!containerEl.contains(this.dropdownEl)) containerEl.append(this.dropdownEl);
+      return;
     }
+    this.el.after(this.dropdownEl);
   }
 
   _makeDropdownFocusable() {
@@ -584,7 +583,7 @@ export class Dropdown extends Component<DropdownOptions> implements Openable {
     if (getComputedStyle(closestOverflowParent).position === 'static')
       closestOverflowParent.style.position = 'relative';
 
-    this._moveDropdown(closestOverflowParent);
+    //this._moveDropdown(closestOverflowParent);
 
     // Set width before calculating positionInfo
     const idealWidth = this.options.constrainWidth

src/forms.ts

@@ -106,7 +106,7 @@ export class Forms {
       // So we set the height to the original one
       textarea.style.height = originalHeight + 'px';
     }
-    textarea.setAttribute('previous-length', textarea.value.length.toString());
+    textarea.setAttribute('previous-length', (textarea.value || '').length.toString());
   }
 
   static Init() {
@@ -158,9 +158,8 @@ export class Forms {
   static InitTextarea(textarea: HTMLTextAreaElement) {
     // Save Data in Element
     textarea.setAttribute('original-height', textarea.getBoundingClientRect().height.toString());
-    textarea.setAttribute('previous-length', textarea.value.length.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));
   }

src/select.ts

@@ -180,7 +180,6 @@ export class FormSelect extends Component<FormSelectOptions> {
 
   _setupDropdown() {
     this.labelEl = document.querySelector('[for="' + this.el.id + '"]');
-    if (this.labelEl) this.labelEl.style.display = 'none';
 
     this.wrapper = document.createElement('div');
     this.wrapper.classList.add('select-wrapper', 'input-field');
@@ -291,7 +290,7 @@ export class FormSelect extends Component<FormSelectOptions> {
 
     // Initialize dropdown
     if (!this.el.disabled) {
-      const dropdownOptions = { ...this.options.dropdownOptions }; // TODO:
+      const dropdownOptions = { ...this.options.dropdownOptions };
       dropdownOptions.coverTrigger = false;
       const userOnOpenEnd = dropdownOptions.onOpenEnd;
       const userOnCloseEnd = dropdownOptions.onCloseEnd;
@@ -333,14 +332,8 @@ export class FormSelect extends Component<FormSelectOptions> {
     }
     // Add initial selections
     this._setSelectedStates();
-
-    // Add Label
-    if (this.labelEl) {
-      const label = document.createElement('label');
-      label.htmlFor = this.input.id;
-      label.innerText = this.labelEl.innerText;
-      this.input.after(label);
-    }
+    // move label
+    if (this.labelEl) this.input.after(this.labelEl);
   }
 
   _addOptionToValues(realOption: HTMLOptionElement, virtualOption: HTMLElement) {