Problem using data-tabSelect and data-autofirst with the dropdown-input class.

Hi,

I admire the CSS in this project, but would like to use awescomplete with https://github.com/vinibiavatti1/TuiCss and will need to apply my own CSS. My aim is to emulate of the rapid keyboard data entry screens of my youth.

Experimenting with a minimal viable web page:

<html>
<head>
    <title>Awesomplete Example</title>
    <script src="../../awesomplete-gh-pages/awesomplete.js"></script>
</head>
<body>
<datalist id="mylist">
    <option>Ada</option>
    <option>Java</option>
    <option>JavaScript</option>
    <option>Brainfuck</option>
    <option>LOLCODE</option>
    <option>Node.js</option>
    <option>Ruby on Rails</option>
</datalist>

awesomplete: <input
    class="awesomplete"
    data-tabSelect="true"
    data-autofirst="true"
    list="mylist" /><br>

dropdown-input: <br><input
    class="dropdown-input"
    data-tabSelect="true"
    data-autofirst="true"
    list="mylist" /><br>
<br>
awesomplete: <input
    class="awesomplete"
    data-tabSelect="true"
    data-autofirst="true"
    list="mylist" /><br>

dropdown-input: <br><input
    class="dropdown-input"
    data-tabSelect="true"
    data-autofirst="true"
    list="mylist" /><br>

<br>
</body>
</html>

The awescomplete class input boxes look a bit odd with no CSS - but they function and respect the data-tabSelect and data-autofirst attributes.

With the dropdown-input class, the data-tabSelect and data-autofirst attributes won't work - and I am aiming to reduce keystrokes to the bare minimum. Adding awesomplete.css to the header make no difference to this problem.

However, if I add data-tabSelect="true" and data-autofirst="true" to the ComboBox example in your index.html, then the required functionality work beautifully.

Do these features require some additional HTML, JS, or other CSS?

Kind Regards Gavin Holt

LeaVerou / awesomplete

Problem using data-tabSelect and data-autofirst with the dropdown-input class. #17261