2 bugfixes

[beholder4096]

Hi, I love your little datalist select. THANKS!! Here are two bugfixes that I have figured out for some anomalous behavior:

after the 1st "opt && opt.focus();" add:
// bugfix: stopping event propagation prevents list immediately moving, just focuses on first option
e.preventDefault();

after the 2nd "opt && opt.focus();" add:
// bugfix: focused element position would jump in relation to view when it is at the bottom of the view
opt && opt.scrollIntoView({behavior: "instant", block: "center",});

---

^{Also you could mention in readme that people should run their browser with parameter --allow-file-access-from-files (Chrome/Chromium/Vivaldi/Edge) since external scripts are normally disabled when viewing your demo in browser with file:// protocol. For example recommend running Edge as:
"C:\Program Files (x86)\Microsoft\Edge\Application\msedge.exe" --allow-file-access-from-files}

[craigbuckler]

Thanks @beholder4096.

Could you explain the first fix? Not sure I understand the problem?

Please note this code was primarily intended for a SitePoint article demonstration and I don't generally maintain it. I'm happy for you to submit a Pull Request, though.

[beholder4096]

Thanks @beholder4096.

Could you explain the first fix? Not sure I understand the problem?

Please note this code was primarily intended for a SitePoint article demonstration and I don't generally maintain it. I'm happy for you to submit a Pull Request, though.

Hi Craig,

The first issue was happening on Edge 125.0.2535.51 (Official build) Chromium version 125.0.6422.60.

In your demo, this only happens if there are many options, when they exceed the size of view the datalist provides. So in the 'country select' input, whenever the input was clicked and then keyboard down arrow was used to go to the "drop-down" (=datalist), the function listControl() was supposed to handle the down arrow action, i.e.:

1. determine the first visible/displayed option
2. and focus() it.

However, there was still the down arrow event that was not properly handled. The event must have bubbled or somehow transferred to the datalist (options parent) and it caused the view of the datalist to move down. This resulted in partial covering of the first visible element, the one we focused. This regardless if the 2nd fix is also applied (I'd imagine the 2nd fix would also fix this, but no).

Hope this explanation is exhausting enough. Regarding the pull request -- I am not very skilled at Git/GitHub so I'll have to study it some more to figure out what should I do to actually make it.

[craigbuckler]

Ahh, I see what you mean! Strange - I never noticed that before? I wonder if some browser behaviour has changed?

Yes, PRs can be confusing at first. You need to fork the repo, clone it, create a new branch, push that, and request it's merged back into the original repo. You should find step-by-step instructions online somewhere.

[beholder4096]

I never noticed that before? I wonder if some browser behaviour has changed?

Quite possibly.

I'll have a look at the forking and the pull request a bit later, thanks.
You are a really good developer and you have so many articles and tutorials about the most useful stuff, perhaps you should make a youtube channel, I'd be the first one to subscribe.

[craigbuckler]

Thanks! I'm glad you find my tutorials useful.

I do have a YouTube channel...
https://www.youtube.com/channel/UCQwdl5oBTWGhifS6bRGADMQ

but it's mainly conference talks and information about my Docker course. I'll add stuff as I do it, though.