Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
Gavin-Holt opened this issue Sep 17, 2024 · 0 comments
Open

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

Gavin-Holt opened this issue Sep 17, 2024 · 0 comments

Comments

@Gavin-Holt
Copy link

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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@Gavin-Holt