`el-select` placeholder active even when no option applicable

[henrikbjorn]

What component (if applicable)

• URL for category:
• Component name: Tailwind Plus Elements Select

Describe the bug
I have a select where the there is no initial value. And instead I am showing a "placeholder" in el-selectedcontent that dosen't have a corresponding el-option object.

When opening the select the first el-select is still marked as active, even though the have been no mouse over or keyboard navigation (see movie)

To Reproduce

This HTML snippet (needs the tailwind 4 cdn play and tailwind elements npm script installed)

<div class="p-4">
  <label for="select" class="block text-sm/6 font-medium text-gray-900 dark:text-white">Assigned to</label>
  <el-select id="select" name="selected" value="non-exisistant" class="mt-2 block">
    <button type="button" class="grid w-full cursor-default grid-cols-1 rounded-md bg-white py-1.5 pr-2 pl-3 text-left text-gray-900 outline-1 -outline-offset-1 outline-gray-300 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-indigo-600 sm:text-sm/6 dark:bg-white/5 dark:text-white dark:outline-white/10 dark:focus-visible:outline-indigo-500">
      <el-selectedcontent class="col-start-1 row-start-1 truncate pr-6 italic text-gray-400">Choose an employee</el-selectedcontent>
    </button>

    <el-options anchor="bottom start" popover class="max-h-60 w-(--button-width) overflow-auto rounded-md bg-white py-1 text-base shadow-lg outline-1 outline-black/5 [--anchor-gap:--spacing(1)] data-leave:transition data-leave:transition-discrete data-leave:duration-100 data-leave:ease-in data-closed:data-leave:opacity-0 sm:text-sm dark:bg-gray-800 dark:shadow-none dark:-outline-offset-1 dark:outline-white/10">
      <div class="font-xs font-medium text-gray-500 px-3 py-2 select-none dark:text-gray-400">Header</div>

      <el-option value="1" class="group/option relative block cursor-default py-2 pr-9 pl-3 text-gray-900 select-none focus:bg-indigo-600 focus:text-white focus:outline-hidden dark:text-white dark:focus:bg-indigo-500">
        <span class="block truncate font-normal group-aria-selected/option:font-semibold">Wade Cooper</span>
      </el-option>

      <el-option value="2" class="group/option relative block cursor-default py-2 pr-9 pl-3 text-gray-900 select-none focus:bg-indigo-600 focus:text-white focus:outline-hidden dark:text-white dark:focus:bg-indigo-500">
        <span class="block truncate font-normal group-aria-selected/option:font-semibold">Arlene Mccoy</span>
      </el-option>

      <el-option value="3" class="group/option relative block cursor-default py-2 pr-9 pl-3 text-gray-900 select-none focus:bg-indigo-600 focus:text-white focus:outline-hidden dark:text-white dark:focus:bg-indigo-500">
        <span class="block truncate font-normal group-aria-selected/option:font-semibold">Devon Webb</span>
      </el-option>

      <el-option value="4" class="group/option relative block cursor-default py-2 pr-9 pl-3 text-gray-900 select-none focus:bg-indigo-600 focus:text-white focus:outline-hidden dark:text-white dark:focus:bg-indigo-500">
        <span class="block truncate font-normal group-aria-selected/option:font-semibold">Tom Cook</span>
      </el-option>

      <el-option value="5" class="group/option relative block cursor-default py-2 pr-9 pl-3 text-gray-900 select-none focus:bg-indigo-600 focus:text-white focus:outline-hidden dark:text-white dark:focus:bg-indigo-500">
        <span class="block truncate font-normal group-aria-selected/option:font-semibold">Tanya Fox</span>
      </el-option>

      <el-option value="6" class="group/option relative block cursor-default py-2 pr-9 pl-3 text-gray-900 select-none focus:bg-indigo-600 focus:text-white focus:outline-hidden dark:text-white dark:focus:bg-indigo-500">
        <span class="block truncate font-normal group-aria-selected/option:font-semibold">Hellen Schmidt</span>
      </el-option>
    </el-options>
  </el-select>
</div>

Expected behavior

I would expect that none of the items had an "active" state until keyboard navigation or hovered over.

Screenshots

Skaermoptagelse.2025-10-10.kl.08.06.57.mov