How to select per default the first element in the combobox list item

[MuslemRahimi]

Hi everyone,

I’m looking for a way to make the first element of a combobox selected by default when it’s opened (as shown in the screenshot). Additionally, I’d like the first element to be automatically selected when performing a search and pressing enter.

I’m currently using Svelte 4. Is there a straightforward way to implement this feature?

Thanks in advance for your help!

<Combobox.Root
        items={searchBarData}
        bind:inputValue
        bind:touchedInput
        onSelectedChange={(state) => handleKeyDown(state?.value)}
      >
        <div class="relative w-full">
          <div class="absolute inset-y-0 left-0 flex items-center pl-2.5">
            <svg
              class="text-icon h-5 w-5"
              fill="none"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="3"
              stroke="currentColor"
              viewBox="0 0 24 24"
              style="max-width: 40px"
              aria-hidden="true"
            >
              <path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
            </svg>
          </div>
          <Combobox.Input
            id="combobox-input"
            on:click={() => (inputValue = "")}
            class="grow rounded-sm border border-gray-600 py-2 pl-9 text-[1rem] placeholder-gray-400 focus:border-default focus:shadow-lg focus:outline-none focus:ring-0 tiny:pl-8 xs:pl-10 text-white md:py-2 w-full bg-secondary focus:bg-secondary"
            placeholder="Company or stock symbol..."
            aria-label="Company or stock symbol..."
          />
          <div
            class="absolute inset-y-0 right-0 flex items-center gap-x-2 px-3 text-gray-350 font-semibold"
          >
            {#if isLoading}
              <span class="loading loading-spinner loading-sm"></span>
            {:else if inputValue?.length > 0}
              <label class="cursor-pointer" on:click={() => (inputValue = "")}>
                <svg
                  class="w-6 h-6"
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
                  ><path
                    fill="white"
                    d="m6.4 18.308l-.708-.708l5.6-5.6l-5.6-5.6l.708-.708l5.6 5.6l5.6-5.6l.708.708l-5.6 5.6l5.6 5.6l-.708.708l-5.6-5.6z"
                  /></svg
                >
              </label>
            {:else}
              <div
                class="pointer-events-none absolute end-6 top-2.5 gap-1 opacity-80 rtl:flex-row-reverse hidden lg:flex"
              >
                <kbd class="kbd kbd-sm">ctrl</kbd>
                <kbd class="kbd kbd-sm">K</kbd>
              </div>
            {/if}
          </div>
        </div>
        <Combobox.Content
          class="w-auto z-40 -mt-0.5 rounded-md border border-gray-700 bg-secondary px-1 py-3 shadow-popover outline-none"
          sideOffset={8}
        >
          {#if inputValue?.length > 0 && searchBarData?.length > 0}
            <div
              class="pl-2 pb-2 border-b border-gray-600 text-white text-sm font-semibold w-full"
            >
              Suggestions
            </div>
            {#each searchBarData as item}
              <Combobox.Item
                class="cursor-pointer text-white border-b border-gray-600 last:border-none flex h-fit w-auto select-none items-center rounded-button py-3 pl-2 pr-1.5 text-sm capitalize outline-none transition-all duration-75 data-[highlighted]:bg-primary"
                value={item?.symbol}
                label={item?.name}
                on:click={() => handleSearch(item?.symbol, item?.type)}
              >
                <div class="flex flex-row items-center justify-between w-full">
                  <span class="text-sm text-blue-400">{item?.symbol}</span>
                  <span class="ml-3 text-sm text-white">{item?.name}</span>
                  <span class="ml-auto text-sm text-white">{item?.type}</span>
                </div>
              </Combobox.Item>
            {/each}
          {:else if inputValue?.length === 0 || !showSuggestions}
            <div
              class="pl-2 pb-2 border-b border-gray-600 text-white text-sm font-semibold w-full"
            >
              {searchHistory?.length > 0 ? "Recent" : "Popular"}
            </div>
            {#each searchHistory?.length > 0 ? searchHistory : popularList as item}
              <Combobox.Item
                class="cursor-pointer text-white border-b border-gray-600 last:border-none flex h-fit w-auto select-none items-center rounded-button py-3 pl-2 pr-1.5 text-sm capitalize outline-none transition-all duration-75 data-[highlighted]:bg-primary"
                value={item?.symbol}
                label={item?.name}
                on:click={() => handleSearch(item?.symbol, item?.type)}
              >
                <div class="flex flex-row items-center justify-between w-full">
                  <span class="text-sm text-blue-400">{item?.symbol}</span>
                  <span class="ml-3 text-sm text-white">{item?.name}</span>
                  <span class="ml-auto text-sm text-white">{item?.type}</span>
                </div>
              </Combobox.Item>
            {/each}
          {:else}
            <span class="block px-5 py-2 text-sm text-white">
              No results found
            </span>
          {/if}
        </Combobox.Content>
      </Combobox.Root>```