fix: properly forward the label to the textfield in autocomplete

hperrin · Dec 11, 2021 · 8ffcab7 · 8ffcab7
1 parent 735560d
commit 8ffcab7
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 3 deletions.
diff --git a/packages/autocomplete/src/Autocomplete.svelte b/packages/autocomplete/src/Autocomplete.svelte
@@ -22,6 +22,7 @@
   >
     <slot>
       <Textfield
+        {label}
         bind:value={text}
         {...prefixFilter($$restProps, 'textfield$')}
       />
@@ -114,6 +115,7 @@
   export let getOptionLabel: (option: any) => string = (option: any) =>
     option == null ? '' : `${option}`;
   export let text = getOptionLabel(value);
+  export let label: string | undefined = undefined;
   export let toggle = false;
   export let combobox = false;
   export let clearOnBlur = !combobox;

diff --git a/packages/autocomplete/src/Autocomplete.types.ts b/packages/autocomplete/src/Autocomplete.types.ts
@@ -19,6 +19,7 @@ export declare class AutocompleteComponentDev extends Component {
     | 'getOptionDisabled'
     | 'getOptionLabel'
     | 'text'
+    | 'label'
     | 'toggle'
     | 'combobox'
     | 'clearOnBlur'
@@ -33,6 +34,7 @@ export declare class AutocompleteComponentDev extends Component {
   } & {
     [k in keyof ListComponentDev['$$prop_def'] as `list\$${k}`]?: ListComponentDev['$$prop_def'][k];
   } & {
+    textfield$label?: never;
     textfield$value?: never;
   } & Component['$$prop_def'];
 }
diff --git a/packages/site/src/routes/demo/autocomplete/_Manual.svelte b/packages/site/src/routes/demo/autocomplete/_Manual.svelte
@@ -6,7 +6,7 @@
       bind:text={textStandard}
       class="demo-autocomplete-width"
     >
-      <Textfield bind:value={textStandard} />
+      <Textfield label="Fruit" bind:value={textStandard} />
     </Autocomplete>
 
     <pre class="status">Selected: {valueStandard || ''}</pre>
@@ -19,7 +19,7 @@
       bind:text={textFilled}
       class="demo-autocomplete-width"
     >
-      <Textfield bind:value={textFilled} variant="filled" />
+      <Textfield label="Fruit" bind:value={textFilled} variant="filled" />
     </Autocomplete>
 
     <pre class="status">Selected: {valueFilled || ''}</pre>
@@ -32,7 +32,7 @@
       bind:text={textOutlined}
       class="demo-autocomplete-width"
     >
-      <Textfield bind:value={textOutlined} variant="outlined" />
+      <Textfield label="Fruit" bind:value={textOutlined} variant="outlined" />
     </Autocomplete>
 
     <pre class="status">Selected: {valueOutlined || ''}</pre>