How do you have both dropdown and select components at the same time?

[m40ma0]

Hi, my mentor has asked me to use dropdown rather than select.

However, when using dropdown with a text field, the dropdown appears but does not change the text in the text field when clicked.

Below is the code.

<div class="dropdown">
                    <input
                      type="text"
                      tabIndex={0}
                      placeholder="-- Select Template --"
                      class="input input-bordered w-full bg-base-100"
                    />
                    <ul
                      tabindex="0"
                      class="dropdown-content dropdown-open menu p-2 shadow bg-base-100 rounded-box w-52"
                    >
                      <li>
                        <a>Item 1</a>
                      </li>
                      <li>
                        <a>Item 2</a>
                      </li>
                    </ul>
                </div>

[saadeghi]

daisyUI only provides the visual UI. When there's an input and a list and you want to manipulate values on click, you need to use JS.

Here's an example with Svelte: https://svelte.dev/repl/bce20af7a3c64f1f9018d4d870b1b2f5?version=3.50.1