Svelte Solutions: Placeholder not showing when binding value to select input field| Sabbirz

This is the standard select template from DaisyUI, where the first option functions as a placeholder:

<select class="select w-full max-w-xs">
  <option disabled selected>Pick your favorite Simpson</option>
  <option>Homer</option>
  <option>Marge</option>
  <option>Bart</option>
  <option>Lisa</option>
  <option>Maggie</option>
</select>

I have customized the template according to my needs. Although it might seem like the following code should work, it won't:


<select
    bind:value={$form.hour}
    {...$constraints.hour}
    name="hour"
    type="number"
    placeholder="Select Hour"
    class="select select-bordered select-primary w-full outline-none focus:border-none"
>
    <option selected disabled>Select Hour</option>
    {#each Array.from({ length: 10 }) as _, i}
        <option value={i + 8}>{i + 8}</option>
    {/each}
</select>
{#if $errors.hour}<span class="invalid text-red-800">{$errors.hour}</span>{/if}

This code won't display the Select Hour text, even though we preselected it using the DaisyUI directive. The reason is that we are binding the value with a Svelte store value.

Let's adjust the value and display the option based on that, also making it unselectable:

<option value="" disabled>
  {$form.hour ? "Choose an hour" : "Select Hour"}
</option>

This code will select "Select Hour" option by default & should work as placeholder

Svelte Solutions: Select field placeholder not working as intended

Svelte Solutions: Placeholder not showing when binding value to select input field