How can I make the input datalist scrolling by the current selection?

Carl Tin 0
Viewed 26

I'm using the native input element with datalist, when I use the arrow key to pick the selection, the scrollbar didn't follow my focus. How can I make it?

<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">
    <option value="Chocolate">
    <option value="Coconut">
    <option value="Mint">
    <option value="Strawberry">
    <option value="Vanilla">
    <option value="Chocolate">
    <option value="Coconut">
    <option value="Mint">
    <option value="Strawberry">
    <option value="Vanilla">
    <option value="Chocolate">
    <option value="Coconut">
    <option value="Mint">
    <option value="Strawberry">
    <option value="Vanilla">
</datalist>

html
1 Answers

You did everything right. Since the <datalist> itself is a replaced element, there is not much that you can do.

This is a known bug in the Chrome browser: Issue 889960: HTML 5 Datalist does not scoll when using the keyboard , open since April. You should definitely express your interest in the issue over there.

I cannot decide the criticality of this issue for you, neither do I know whether you could help fix it upstream in the Chromium code base.

Additionally, the Chrome implementation seems to have more issues concerning accessibility of datalist: Issue 1130496: datalist is not accessible (zoom, focus visibility, contrast adjustment).

So if you need to fix this, and you cannot do so upstream, you’ll need to implement the listbox yourself. You might want to track the bugs, and once they are fixed you roll back your custom solution.

The Combobox pattern from the ARIA Authoring Practices Guide (APG) gives an idea of how such a combobox should behave.

The Editable Combobox With Both List and Inline Autocomplete Example might come closest to what browsers do with a datalist.

Once you clarified your expectations, I’m sure you’ll find a library that fits well in your environment, and respects the requirements from the pattern.

userKcy20
Related