fix: textfield onDestroy issues

packages/textfield/Textfield.svelte

@@ -8,10 +8,10 @@
       removeClass,
       active: input && matches(input.getElement(), ':active'),
       registerInteractionHandler: (evtType, handler) =>
-        input.getElement() &&
+        input.getElement &&
         input.getElement().addEventListener(evtType, handler, applyPassive()),
       deregisterInteractionHandler: (evtType, handler) =>
-        input.getElement() &&
+        input.getElement &&
         input
           .getElement()
           .removeEventListener(evtType, handler, applyPassive()),
@@ -97,8 +97,8 @@
           on:input
           on:blur
           on:focus
-          aria-controls={helperId ? $helperId : null}
-          aria-describedby={helperId ? $helperId : null}
+          aria-controls={helperId ? get(helperId) : null}
+          aria-describedby={helperId ? get(helperId) : null}
           {...prefixFilter($$props, 'input$')}
         />
         <slot name="internalCounter" />
@@ -122,8 +122,8 @@
         on:input
         on:blur
         on:focus
-        aria-controls={helperId ? $helperId : null}
-        aria-describedby={helperId ? $helperId : null}
+        aria-controls={helperId ? get(helperId) : null}
+        aria-describedby={helperId ? get(helperId) : null}
         {...noLabel && label != null ? { placeholder: label } : {}}
         {...prefixFilter($$props, 'input$')}
       />
@@ -208,6 +208,7 @@
   import { matches } from '@material/dom/ponyfill';
   import { onMount, onDestroy, getContext, tick } from 'svelte';
   import { get_current_component } from 'svelte/internal';
+  import { get } from 'svelte/store';
   import {
     forwardEventsBuilder,
     classMap,

packages/textfield/helper-text/HelperText.svelte

@@ -75,7 +75,9 @@
       },
     });
 
-    dispatch(getElement(), 'SMUI:textfield:helper-text:id', idStore);
+    if (id.startsWith('SMUI-textfield-helper-text-')) {
+      dispatch(getElement(), 'SMUI:textfield:helper-text:id', idStore);
+    }
     dispatch(getElement(), 'SMUI:textfield:helper-text:mount', instance);
 
     instance.init();

site/src/routes/demo/menu-surface.svelte

@@ -33,8 +33,10 @@
 
   <pre class="status">Clicked: {clicked}</pre>
 
-  <!-- <div>
-<h6 class="demo-title">Anchored automatically, corner set to bottom-left</h6>
+  <div>
+    <h6 class="demo-title">
+      Anchored automatically, corner set to bottom-left
+    </h6>
 
     <div style="min-width: 100px;">
       <Button on:click={() => formSurface.setOpen(true)}
@@ -53,7 +55,7 @@
         </div>
       </MenuSurface>
     </div>
-  </div> -->
+  </div>
 
   <div>
     <h6 class="demo-title">Anchored manually</h6>
@@ -106,7 +108,7 @@
 <script>
   import MenuSurface, { Anchor } from '@smui/menu-surface';
   import List, { Item, Separator, Text } from '@smui/list';
-  // import Textfield from '@smui/textfield';
+  import Textfield from '@smui/textfield';
   import ImageList, {
     Item as ImageListItem,
     ImageAspectContainer,
@@ -115,9 +117,9 @@
   import Button from '@smui/button';
   import './menu-surface.scss';
 
-  // let formSurface;
-  // let name = '';
-  // let email = '';
+  let formSurface;
+  let name = '';
+  let email = '';
   let imageListSurface;
   let imageListAnchor;
   let imageListAnchorClasses = {};

site/src/routes/demo/textfield.svelte

@@ -606,13 +606,22 @@
   <div>
     <h6 class="demo-title">Manual Setup</h6>
 
-    <!-- When you setup the textfield manually, you need to provide each
-      of the components underneath to the Textfield component. It will also
-      not be wrapped inside a label element, so you'll need to provide
-      accessibility attributes yourself. The Textfield's foundation will
-      only be initialized after a Svelte tick() has passed, in order to
-      properly recieve the components. (This may have unforeseen
-      consequences, IDK. Use this feature at your own risk.) -->
+    <!--
+      Using a manual setup gives you more control over the layout and
+      elements inside the Textfield.
+      
+      When you setup the textfield manually, you need to provide each
+      of the components underneath to the Textfield component. It will
+      also not be wrapped inside a label element, so you'll need to
+      provide `id` and `for` attributes yourself. The HelperText does
+      not pass its ID over to the Input either, so you'll need those
+      accessibility attributes too.
+      
+      The Textfield's foundation will only be initialized after a
+      Svelte tick() has passed, in order to properly recieve the
+      components. (This may have unforeseen consequences, IDK.
+      Use this feature at your own risk.)
+    -->
     <div class="columns margins">
       <div>
         <Textfield

site/src/routes/demo/theme.scss

@@ -26,5 +26,5 @@
   // Import the '/style' file for each component you
   // use within this alternate theme's container.
   @import '@smui/button/style';
-  // @import '@smui/fab/style';
+  @import '@smui/fab/style';
 }