Input field dissapearing when using {#if} statement inside <Input></Input> component

[codeho]

Describe the bug

Consider this code:

<form>
  <Label for="search" class="block mb-2">Your Email</Label>
  <Input id="search" placeholder="Search" size="lg">
    <SearchOutline slot="left" class="w-6 h-6 text-gray-500 dark:text-gray-400" />
    {#if validating}
      <Button slot="right" size="sm" type="submit">Search</Button>
    {:else}
      <Button slot="right" size="sm" type="submit">Search</Button>
    {/if}
  </Input>
</form>

This causes the input field to not be rendered:

Where if there is no {#if}... statement in there like this:

<form>
  <Label for="search" class="block mb-2">Your Email</Label>
  <Input id="search" placeholder="Search" size="lg">
    <SearchOutline slot="left" class="w-6 h-6 text-gray-500 dark:text-gray-400" />
      <Button slot="right" size="sm" type="submit">Search</Button>
  </Input>
</form>

it renders correctly:

Reproduction

https://stackblitz.com/edit/sveltejs-kit-template-default-jcllr5?file=src%2Froutes%2F%2Bpage.svelte

Flowbite version and System Info

System:
    OS: macOS 13.6
    CPU: (16) x64 Intel(R) Core(TM) i9-9900K CPU @ 3.60GHz
    Memory: 96.10 MB / 32.00 GB
    Shell: 5.2.15 - /usr/local/bin/bash
  Binaries:
    Node: 16.18.1 - ~/.nvm/versions/node/v16.18.1/bin/node
    Yarn: 3.6.1 - /usr/local/bin/yarn
    npm: 8.19.2 - ~/.nvm/versions/node/v16.18.1/bin/npm
    Watchman: 2023.08.28.00 - /usr/local/bin/watchman
  npmPackages:
    @sveltejs/kit: ^1.25.2 => 1.25.2
    flowbite-svelte: ^0.44.18 => 0.44.18
    svelte: ^4.2.1 => 4.2.1
    vite: ^4.4.9 => 4.4.9

[bolt-new-by-stackblitz[bot]]

Start a new pull request in StackBlitz Codeflow.

• sveltejs-kit-template-default-jcllr5 (Open reproduction)

[codeho]

Actually this is not related to the button or icon. Any kind of {#if} statement inside a <Input> component causes this:

<Input id="search" placeholder="Search" size="lg">
  {#if validating}
    asdas
  {:else}
    sdsd
  {/if}
</Input>

[jjagielka]

Input component, similarly to standard input HTML element, is supposed to be used without any children:

<Input .... />

Slots of Input component are used for:

• add icons floating on sides of underlying input element (usage of slot="left" and slot="right" is mandatory) - Input with icon
• override the default underlying input element (usage of the default slot) - Advanced usage

Your examples above use the default slot and override the underlying input with arbitrary text. Which is in accordance with the design.

[codeho]

i see. Well but wouldn't it be convenient to make the use of statements in there if there's already the opportunity to add other components inside?

[jjagielka]

You can't insert anything inside HTML input. As stated, you can put some overlays left and right side by using slot="left" and slot="right".