Dropdown property does not work well with keyboard input

[c-classen]

Introduction

I created a form which I mostly want to use with the keyboard (entering text, switching to the next component with tab, submitting the values with enter, etc.). However, the select component with the dropdown property set to true causes some issues:

1. The autofocus property is not working
2. I do not start with an empty input. Instead, the input is already filled with the first option. I can then start typing and are able to select a different option, but this is confusing to me as this makes the input look like a multi select even though only one item can be selected at a time.
3. After typing a few letters, I want to use the arrow keys to select an option. This works, but there is no visual feedback regarding which option is currently selected.

To Reproduce

select
  'form' as component,
  'Testform' as title,
  'Save' as validate;
select
  'testinput' as name,
  'Test Input' as label,
  'select' as type,
  true as dropdown,
  true as autofocus,
  true as create_new,
  '[{"label": "A", "value": "a"}, {"label": "AA", "value": "aa"}, {"label": "B", "value": "b"}]' as options;

Actual behavior

1. Right after loading the page, the input does not have the focus. If I press the "a" key, nothing happens.
2. Right after loading the page, the element "A" is selected. When I click on the input and enter some text, that text is displayed behind the currently selected element.
3. When I click the input and enter "a" I have no visual clue that the first element "A" within the dropdown is currently "active", e.g. it will be selected if I press enter. Likewise, if I press the arrow down button afterwards, I have no visual clue telling me that the element "AA" is now active.

Expected behavior

1. The input should have the focus after loading, since it is the only input on the page with autofocus set to true. This means that, even without clicking the input after loading the page, if I press the "a" key, this keystroke should go to the search input and open the autocomplete options.
2. The input should initially be empty as I have not specified a value property for it. Also, for my intuition, the input should behave closer to a text field than a multi select.
3. There should be a highlighting of the currently "active" autocomplete item.

Version information

• Browser and OS: Firefox + Linux
• Database: SQLite
• SQLPage Version: v0.20.4

Additional context

I find the name "dropdown" for the property somewhat confusing. Even with the property missing or set to false, the input is still rendered as a dropdown. Only your ability to search it by entering text depends on the "dropdown" property. Also, there is a slight, but noticable delay between entering something and the dropdown filtering on the entries containing the entered phrase as a substring.

Off topic: Great project! When I first heard of it, I thought this would be more of an "installing DOOM on a toaster" kind of project. You know, where the question is more "Can it be done?" and less "Should it be done?" :smile: . But after creating a web app in less than 500 lines of code including database migrations, I must say this is awesome if you want a complete simple web app quickly.

[lovasoa]

Hi and thank you very much for the detailed bug report ! Out of curiosity: what are you building with SQLPage ?

I'll look into what can be done on our side, but it's possible a part of the behavior you are observing is coming from the upstream tomselect library. In this case take it'll take longer to fix. The only change that I think should not be done is the first value being selected by default. This is the default behavior of select inputs all over the web, and in cases where you need an "empty" value, you can always add {"label": "", "value": ""} as the first option.

About your off-topic remark: where did you first hear about SQLPage ? Do you think there is something we could change on the SQLPage website or in the README to give it less of a DOOM on a toaster vibe ?

[lovasoa]

Also, do you have a better name in mind to replace dropdown ? Something that would reflect what user interface element this is, and be coherent with the rest of the naming in sqlpage ?

[lovasoa]

@c-classen : can you try the latest fixes ? They'll be available on docker as lovasoa/sqlpage:main in a few minutes.

[c-classen]

Out of curiosity: what are you building with SQLPage ?

I built a scoreboard application to keep track of the results of simraces we do in a small group. This way we can do multiplayer championships without the game directly supporting it. I mean a google spreadsheet would have probably done the job, but I really enjoyed learning SQLPage and it took just a few hours to get the whole thing working and deployed, which was about the same time it took me to figure out a solution to some weird babel nodejs issue I encountered with another framework I tried to set up. :upside_down_face:

The only change that I think should not be done is the first value being selected by default.

Yes, that makes sense and the workaround you described works for me.

where did you first hear about SQLPage ?

I searched for some easy way to create and deploy a whole web app, I think for frameworks utilizing isomorphic Javascript to be exact, and with some search terms I ended up either on the SQLPage website or the PostgreSQL news about it, I'm not sure anymore.

Do you think there is something we could change on the SQLPage website or in the README to give it less of a DOOM on a toaster vibe ?

That is probably just me being narrow minded. The idea of using only SQL to create a complete web app just seemed kind of wild to me. :smile:

If I had to give some suggestion, maybe switch out the "Beautiful" claim for a "Secure" claim on the landing page. On the one hand, I don't think beauty is something that makes this framework stand out from the others and it is probably not why people will pick SQLPage. Not that I want to criticize the styling, but people might think more about fancy animations and theming when hearing the term. On the other hand, the mere idea of defining frontend as well as backend in pure SQL screamed "SQL injection" at me, especially when concatenating URL query parameters into an SQL statement. Maybe you could link to this page to address concerns like these.

But again, maybe my first impression was just due to my general skepticism.

Also, do you have a better name in mind to replace dropdown?

Maybe something like searchable? Because that is basically what changes in my understanding. It is still a dropdown, but now I can enter text in the input to filter the options.

can you try the latest fixes ?

I did and...

1. the autofocus attribute now works :heavy_check_mark:
2. The input still behaves kind of multi-selectish. If I type after I already selected something, the characters appear behind the currently selected option. But after thinking about it, while maybe not being perfectly intuitive to me, it certainly is the most useful behavior. So that works for me :heavy_check_mark:
3. I can now see the highlighted option moving around as I press the arrow up and down keys. :heavy_check_mark:

The only room for improvement I still see would be having the filtering be applied instantly. There is still a little delay between typing something and the filtering being applied to the options dropdown.

But the more noticeable issues are all resolved. Thank you for the quick fix and your great work with this project.

[lovasoa]

I really enjoyed learning SQLPage and it took just a few hours to get the whole thing working and deployed, which was about the same time it took me to figure out a solution to [a bug] I encountered with another framework I tried to set up. 🙃

I love this sentence ! Can I quote you on this on the website ?

If I had to give some suggestion, maybe switch out the "Beautiful" claim for a "Secure" claim on the landing page.

Yes ! We often get questions about the security model, and it's really not evident how sqlpage handles it when reading the homepage. On the other hand, I think making something that looks decent (if not beautiful) and be put in front of a client is a recurring issue of backend programmers, database admins, and other "data people" who are the target users of SQLPage. I'll think about what I can do to highlight both security and looks.

[c-classen]

Can I quote you on this on the website ?

Sure, go ahead, you can also leave out the brackets around "a bug".

I think making something that looks decent (if not beautiful) and be put in front of a client is a recurring issue of backend programmers, database admins, and other "data people" who are the target users of SQLPage.

Yes, I probably underestimate the importance of looks as it is not something I focus on personally.

[lovasoa]

I updated the homepage and added "searchable" as an alias of "dropdown".