Svelte Solutions: Select field placeholder not working as intended

Select field placeholder not working as intended

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


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>

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

    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>
{#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"}

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