Associate an sl-input with a <datalist> or similar

[KonnorRogers]

is it possible to achieve something similar to this:

<label for="ice-cream-choice">Choose a flavor:</label>
<input list="ice-cream-flavors" id="ice-cream-choice" name="ice-cream-choice" />

<datalist id="ice-cream-flavors">
    <option value="Chocolate">
    <option value="Coconut">
    <option value="Mint">
    <option value="Strawberry">
    <option value="Vanilla">
</datalist>

With Shoelace's sl-input ?

Or would I have to wire up some javascript?

I found a discussion here:

#127

but it seems more related to tag selecting than for a search input.

[claviska]

I wish I had more experience with datalists, but I don't believe you can because the input is in a shadow root. You'd need to modify the component or inject it into the input's shadow root (not recommended).

What's the use case? Looks like maybe an autocomplete. I'm not sure I'd go with datalist for that — I've heard some complaints about it but haven't taken the time to dive in myself.

[KonnorRogers]

Ahhh, im just looking to standup a quick site with search that has autocomplete / suggestions and was looking to use sl-input but im assuming id have to hook up some javascript to get it to display as a `sl-select.

[claviska]

Relevant: https://twitter.com/samifouad/status/1386293460022431748?s=21

[trailsnail]

We have now had the case in two out of three projects where we use Shoelace that you enter input in a text field and then get a list of suggestions to choose from.
An sl-dropdown containing an sl-input did not work because of the different dependencies of Listener.
So we used an sl-input, fetch the search and display the search results as sl-menu. These can be displayed nicely by default.

Previously, we used chosen.js, which we replaced with a vanilla version due to its dependency on jQuery.

Since we use Shoelace more and more in our projects, we now had the idea to tinker the sl-input with suggestion logic as an own small component to be able to reuse it in different projects without much effort.
Thereby the question came up, if a final version of it as a utility in Sholecae would be interesting.

If yes, then we can talk about a way to the goal.

[claviska]

This will probably never be supported for a few reasons:

• The aforementioned shadow root issue (i.e. the datalist is slotted which is light DOM but the input is in the shadow DOM)
• The behavior for datalists varies across browsers, and support is mixed for non-textual inputs
• The input component is already handling quite a bit, and the asks seems to be more for a combobox which is being tracked in Combobox / autocomplete #127

Some work has already begun to refactor <sl-select> to improve accessibility with screen readers and bake in combobox features. In the meantime, if you really need this today, you can always style an <input> using the design tokens to match <sl-input> and link up your own <datalist>.

[KonnorRogers]

Yea this is 100% a combobox. I am now slightly curious if with a Is auto-upgraded by the browser to be a combobox

[kylepl]

While I have limited experience in web components and shadow DOM, and it's not clear what's too bad about injecting a datalist into the sl-input's shadow root for now, but it worked fine for me (though you need to inject it any time you change the datalist):

const datalistToInject = document.getElementById("your_datalist_id")
document.getElementById("your_sl_input_id").shadowRoot.appendChild(datalistToInject);
document.getElementById("your_sl_input_id").shadowRoot.querySelector("input").setAttribute("list", "your_datalist_id");

Pictured below is Linux Chrome.