Problem using data-tabSelect and data-autofirst with the dropdown-input class. #17261
Description
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