[TextField] Support passing slots prop as override for $$slots. Worka…

…round for sveltejs/svelte#6059
techniq · Oct 6, 2021 · 8af7746 · 8af7746
1 parent 08b473f
commit 8af7746
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 5 deletions.
diff --git a/src/lib/components/SelectField.svelte b/src/lib/components/SelectField.svelte
@@ -303,6 +303,7 @@
     on:keypress={onKeyPress}
     actions={(node) => [selectOnFocus(node)]}
     class="h-full"
+    slots={$$slots}
     {...$$restProps}
   >
     <slot slot="prepend" name="prepend" />

diff --git a/src/lib/components/TextField.svelte b/src/lib/components/TextField.svelte
@@ -86,10 +86,15 @@
   $: hasInputValue = inputValue != null && inputValue !== '';
   $: hasLabel = label !== '';
 
-  $: hasPrepend = $$slots.prepend || icon != null;
-  $: hasAppend = $$slots.append || clearable || error || operators;
-  $: hasPrefix = $$slots.prefix || type === 'currency';
-  $: hasSuffix = $$slots.suffix || type === 'percent';
+  /**
+   * Support overriding $$slots (workaround for https://github.com/sveltejs/svelte/issues/6059)
+   */
+  export let slots: typeof $$slots;
+
+  $: hasPrepend = (slots ? slots.prepend : $$slots.prepend) || icon != null;
+  $: hasAppend = (slots ? slots.append : $$slots.append) || clearable || error || operators;
+  $: hasPrefix = (slots ? slots.prefix : $$slots.prefix) || type === 'currency';
+  $: hasSuffix = (slots ? slots.suffix : $$slots.suffix) || type === 'percent';
 
   $: hStackTemplate = `${hasPrepend ? 'auto' : ''} 1fr ${hasAppend ? ' auto' : ''}`;
 
@@ -133,7 +138,9 @@
           <slot name="prepend" />
 
           {#if icon}
-            <span class={clsx('mr-3', rounded && !$$slots.prepend && 'ml-3')}>
+            <span
+              class={clsx('mr-3', rounded && !(slots ? slots.prepend : $$slots.prepend) && 'ml-3')}
+            >
               <Icon path={icon} class="text-black/50" />
             </span>
           {/if}

diff --git a/src/routes/docs/components/SelectField.md b/src/routes/docs/components/SelectField.md
@@ -122,6 +122,12 @@
   <SelectField {items} icon={mdiMagnify} />
 </Preview>
 
+## Rounded w/ icon
+
+<Preview>
+  <SelectField {items} icon={mdiMagnify} rounded />
+</Preview>
+
 ## Search
 
 <Preview>