fix: #1600

Author: shinokada

src/lib/forms/input-field/Input.svelte

@@ -5,30 +5,7 @@
   import { input, clampSize } from ".";
   import clsx from "clsx";
 
-  let {
-    children,
-    left,
-    right,
-    value = $bindable(),
-    elementRef = $bindable(),
-    clearable = false,
-    size,
-    color = "default",
-    class: className,
-    wrapperClass,
-    classLeft,
-    classRight,
-    divClass,
-    clearableSvgClass,
-    clearableColor = "none",
-    clearableClass,
-    clearableOnClick,
-    // Combobox props
-    data = [],
-    maxSuggestions = 5,
-    onSelect,
-    ...restProps
-  }: InputProps<InputValue> = $props();
+  let { children, left, right, value = $bindable(), elementRef = $bindable(), clearable = false, size, color = "default", class: className, wrapperClass, classLeft, classRight, divClass, clearableSvgClass, clearableColor = "none", clearableClass, clearableOnClick, data = [], maxSuggestions = 5, onSelect, ...restProps }: InputProps<InputValue> = $props();
 
   // Automatically enable combobox when data is provided
   const isCombobox = $derived(Array.isArray(data) && data.length > 0);
@@ -183,10 +160,9 @@
   <div tabindex="-1" bind:this={dummyFocusDiv} class="sr-only"></div>
 {/if}
 
+{#if isCombobox}
 <div class={twMerge(isCombobox ? "relative w-full" : "", wrapperClass)}>
-  {#if group}
-    {@render inputContent()}
-  {:else if right || left || clearable}
+  {#if right || left || clearable}
     <div class={base({ class: divClass })}>
       {@render inputContent()}
     </div>
@@ -204,6 +180,17 @@
     </div>
   {/if}
 </div>
+{:else}
+  {#if group}
+    {@render inputContent()}
+  {:else if right || left || clearable}
+    <div class={base({ class: divClass })}>
+      {@render inputContent()}
+    </div>
+  {:else}
+    {@render inputContent()}
+  {/if}
+{/if}
 
 {#snippet inputContent()}
   {#if left}

src/routes/component-data/Input.json

@@ -22,7 +22,7 @@
     ["clearableColor", "\"none\""],
     ["clearableClass", ""],
     ["clearableOnClick", ""],
-    ["// Combobox props\n    data", "[]"],
+    ["data", "[]"],
     ["maxSuggestions", "5"],
     ["onSelect", ""]
   ]

src/routes/docs/forms/input-field.md

@@ -168,6 +168,33 @@ text with one click.
 <Input data={carMakers} clearable placeholder="Clearable" />
 ```
 
+## Combobox with icon
+
+```svelte example class="h-80"
+<script>
+  import { Input } from "flowbite-svelte";
+  import { EnvelopeSolid } from "flowbite-svelte-icons";
+  const fakeEmails = [
+    "[email protected]",
+    "[email protected]",
+    "[email protected]",
+    "[email protected]",
+    "[email protected]",
+    "[email protected]",
+    "[email protected]",
+    "[email protected]",
+    "[email protected]",
+    "[email protected]"
+  ];
+</script>
+
+<Input data={fakeEmails} placeholder="[email protected]" clearable type="email" size="md" class="ps-9">
+  {#snippet left()}
+    <EnvelopeSolid class="h-5 w-5" />
+  {/snippet}
+</Input>
+```
+
 ## Input sizes
 
 Use the following examples to apply a small, default or large size for the input fields.

static/llm/forms/input-field.md

@@ -17,7 +17,7 @@ On this page you will find all of the input types based on multiple variants, st
 
 Use this example as a generic form element which includes multiple input fields types such as text, email, password, number, URL, and phone number and use the grid layout to add multiple columns and rows.
 
-```svelte
+```svelte example
 <script>
   import { Input, Label, Helper, Button, Checkbox, A } from "flowbite-svelte";
 </script>
@@ -73,7 +73,7 @@ Use this example as a generic form element which includes multiple input fields
 This example shows how to create an input field where the user can remove the
 text with one click.
 
-```svelte
+```svelte example
 <script>
   import { Input } from "flowbite-svelte";
 </script>
@@ -83,7 +83,7 @@ text with one click.
 
 ## Event
 
-```svelte
+```svelte example
 <script>
   import { Input } from "flowbite-svelte";
 </script>
@@ -99,7 +99,7 @@ text with one click.
 
 ## Accessing Input Element with elementRef
 
-```svelte
+```svelte example
 <script lang="ts">
   import { Button, Modal, Input, Label } from "flowbite-svelte";
   let defaultModal = $state(false);
@@ -143,7 +143,7 @@ text with one click.
 
 ## Combobox
 
-```svelte
+```svelte example
 <script>
   import { Input } from "flowbite-svelte";
   const carMakers = ["Toyota", "Ford", "Honda", "Chevrolet", "Nissan", "BMW", "Mercedes-Benz", "Volkswagen", "Hyundai", "Kia", "Mazda", "Subaru", "Lexus", "Audi", "Jeep", "Dodge", "Ram", "GMC", "Cadillac", "Chrysler", "Buick", "Infiniti", "Acura", "Volvo", "Porsche", "Jaguar", "Land Rover", "Mini", "Mitsubishi", "Genesis", "Tesla", "Fiat", "Peugeot", "Renault", "Alfa Romeo", "Citroën", "SEAT", "Skoda", "Saab", "Suzuki", "Isuzu", "Scion", "Hummer", "Lincoln", "Opel", "Daewoo", "Rivian", "Lucid", "Polestar", "Bugatti", "Maserati", "Ferrari", "Lamborghini", "Bentley", "Rolls-Royce", "Aston Martin", "McLaren", "Pagani", "Koenigsegg", "Maybach", "Tata", "Mahindra", "Perodua", "Proton", "Chery", "Geely", "Great Wall", "BYD", "NIO", "XPeng", "VinFast", "Zotye", "FAW", "BAIC", "Lancia", "Dacia", "Cupra", "Roewe", "Holden", "Smart"];
@@ -154,13 +154,40 @@ text with one click.
 <Input data={carMakers} clearable placeholder="Clearable" />
 ```
 
+## Combobox with icon
+
+```svelte example
+<script>
+  import { Input } from "flowbite-svelte";
+  import { EnvelopeSolid } from "flowbite-svelte-icons";
+  const fakeEmails = [
+    "[email protected]",
+    "[email protected]",
+    "[email protected]",
+    "[email protected]",
+    "[email protected]",
+    "[email protected]",
+    "[email protected]",
+    "[email protected]",
+    "[email protected]",
+    "[email protected]"
+  ];
+</script>
+
+<Input data={fakeEmails} placeholder="[email protected]" clearable type="email" size="md" class="ps-9">
+  {#snippet left()}
+    <EnvelopeSolid class="h-5 w-5" />
+  {/snippet}
+</Input>
+```
+
 ## Input sizes
 
 Use the following examples to apply a small, default or large size for the input fields.
 
 User the size prop to change the input size. Choose one from 'sm:text-md' | 'text-sm' | 'sm:text-xs'. The default size is text-sm.
 
-```svelte
+```svelte example
 <script>
   import { Input, Label } from "flowbite-svelte";
 </script>
@@ -185,7 +212,7 @@ User the size prop to change the input size. Choose one from 'sm:text-md' | 'tex
 
 Get started with this example if you want to apply the disabled state to an input field. Add the disabled to change the input to disabled.
 
-```svelte
+```svelte example
 <script>
   import { Input } from "flowbite-svelte";
 </script>
@@ -198,7 +225,7 @@ Get started with this example if you want to apply the disabled state to an inpu
 
 Use the following example to apply validation styles for success and error messages.
 
-```svelte
+```svelte example
 <script>
   import { Input, Label, Helper } from "flowbite-svelte";
 </script>
@@ -223,7 +250,7 @@ Use the following example to apply validation styles for success and error messa
 
 ## Input with icon
 
-```svelte
+```svelte example
 <script>
   import { Label, Input, Button, CloseButton } from "flowbite-svelte";
   import { EnvelopeSolid } from "flowbite-svelte-icons";
@@ -264,7 +291,7 @@ Use the following example to apply validation styles for success and error messa
 
 This example can be used to add a descriptive icon or additional text inside the input field.
 
-```svelte
+```svelte example
 <script>
   import { Label, Input, Button, InputAddon, ButtonGroup, Checkbox } from "flowbite-svelte";
 </script>
@@ -322,7 +349,7 @@ This example can be used to add a descriptive icon or additional text inside the
 
 This example shows how to add `onclick` event handler to the icon in `Input`. By clicking an icon, it toggles icon and `type`:
 
-```svelte
+```svelte example
 <script>
   import { Button, Label, Input, ButtonGroup, InputAddon } from "flowbite-svelte";
   import { EyeOutline, EyeSlashOutline } from "flowbite-svelte-icons";
@@ -366,7 +393,7 @@ This example shows how to add `onclick` event handler to the icon in `Input`. By
 
 Use the helper prop to add your helper text. You can use HTML in the helper text.
 
-```svelte
+```svelte example
 <script>
   import { Input, Label, Helper } from "flowbite-svelte";
 </script>
@@ -385,7 +412,7 @@ Use the helper prop to add your helper text. You can use HTML in the helper text
 
 By default the `Input` component binds the `value` as `string`. If you need a variable bound as `number` you need to use a specialised version of `Input` called `NumberInput`.
 
-```svelte
+```svelte example
 <script lang="ts">
   import { Input, Label } from "flowbite-svelte";
   let value = $state(5);
@@ -403,7 +430,7 @@ By default the `Input` component binds the `value` as `string`. If you need a va
 
 ## Search input
 
-```svelte
+```svelte example
 <script>
   import { Input, Label, Button } from "flowbite-svelte";
   import { SearchOutline } from "flowbite-svelte-icons";
@@ -426,7 +453,7 @@ By default the `Input` component binds the `value` as `string`. If you need a va
 
 Use this example to show a dropdown menu right next to the input field.
 
-```svelte
+```svelte example
 <script>
   import { Input, InputAddon, ButtonGroup, Button, Dropdown, DropdownItem } from "flowbite-svelte";
   import { ChevronDownOutline, SearchOutline } from "flowbite-svelte-icons";
@@ -453,7 +480,7 @@ Use this example to show a dropdown menu right next to the input field.
 
 If you need a full control over `input` HTML element while still re-using the Flowbite formatting, you can put the `input` element as a default slot. The example below is in fact the implementation of the above mentioned `NumberInput`.
 
-```svelte
+```svelte example
 <script>
   import { Input } from "flowbite-svelte";
   let value = $state(5);
@@ -469,7 +496,7 @@ If you need a full control over `input` HTML element while still re-using the Fl
 
 ## Using Svelte's snapshot to preserve the input
 
-```svelte
+```svelte example
 <script lang="ts">
   import { Tabs, TabItem, Label, Button, Input, Textarea } from "flowbite-svelte";
   import type { Snapshot } from "./$types";