fix: textfield labels and notches show incorrect state and position

Fixes #236

Author: hperrin

packages/floating-label/FloatingLabel.svelte

@@ -39,7 +39,6 @@
 
 <script>
   import { MDCFloatingLabelFoundation } from '@material/floating-label';
-  import { ponyfill } from '@material/dom';
   import { onMount, getContext } from 'svelte';
   import { get_current_component } from 'svelte/internal';
   import {
@@ -48,7 +47,6 @@
     useActions,
     dispatch,
   } from '@smui/common/internal.js';
-  const { estimateScrollWidth } = ponyfill;
 
   const forwardEvents = forwardEventsBuilder(get_current_component());
 
@@ -84,7 +82,17 @@
     instance = new MDCFloatingLabelFoundation({
       addClass,
       removeClass,
-      getWidth: () => estimateScrollWidth(getElement()),
+      getWidth: () => {
+        const el = getElement();
+        const clone = el.cloneNode(true);
+        el.parentNode.appendChild(clone);
+        clone.classList.add('smui-floating-label--remove-transition');
+        clone.classList.add('smui-floating-label--force-size');
+        clone.classList.remove('mdc-floating-label--float-above');
+        const scrollWidth = clone.scrollWidth;
+        el.parentNode.removeChild(clone);
+        return scrollWidth;
+      },
       registerInteractionHandler: (evtType, handler) =>
         getElement().addEventListener(evtType, handler),
       deregisterInteractionHandler: (evtType, handler) =>

packages/floating-label/_style.scss

@@ -1 +1,10 @@
 @use '@material/floating-label/mdc-floating-label';
+
+.smui-floating-label--remove-transition {
+  transition: unset !important;
+}
+
+.smui-floating-label--force-size {
+  position: absolute !important;
+  transform: unset !important;
+}

packages/textfield/Textfield.svelte

@@ -22,7 +22,8 @@
       'mdc-text-field--outlined': variant === 'outlined',
       'smui-text-field--standard': variant === 'standard' && !textarea,
       'mdc-text-field--no-label': noLabel || (label == null && !$$slots.label),
-      'mdc-text-field--label-floating': value != null && value !== '',
+      'mdc-text-field--label-floating':
+        focused || (value != null && value !== ''),
       'mdc-text-field--with-leading-icon':
         withLeadingIcon === uninitializedValue
           ? $$slots.leadingIcon
@@ -335,6 +336,16 @@
     instance.setDisabled(disabled);
   }
 
+  // React to changes of value from outside component.
+  let previousValue = value;
+  $: if (instance && valued && previousValue !== value) {
+    previousValue = value;
+    // Check the data is flowing down.
+    if (instance.getValue() !== value) {
+      instance.setValue(value);
+    }
+  }
+
   if (addLayoutListener) {
     removeLayoutListener = addLayoutListener(layout);
   }