search

materializecss / materialize

Materialize, a web framework based on Material Design
https://materializeweb.com/
MIT License
912 stars 105 forks source link

Scroll to selected dropdown #12

Closed ChildishGiant closed 3 years ago

ChildishGiant commented 4 years ago

https://github.com/Dogfalo/materialize/issues/3502 added the ability to scroll through autocomplete results with the arrow keys but as soon as you get to ones that need scrolling, you're screwed.

I've bodged this into my app (https://cloverleaf.app) using onkeyup and 

const selected = document.querySelector(".autocomplete-content.dropdown-content .active");
if (selected)   selected.scrollIntoView({behavior: "smooth", block: "nearest", inline: "nearest"});

The issue with this is that when holding down, it waits for you to let go before scrolling. I've tried doing this onkeydown but then it's out by one so to properly do this I think it needs to be worked into the lib. I might take a crack at this but no promises 😄

Here's a codepen as an example: https://codepen.io/ChildishGiant/full/MWyKpxZ

createdbyken commented 4 years ago

¡Fantastic! Good job, this will help a lot. <3

ChildishGiant commented 3 years ago

It seems like this is supposedly implemented so is actually a bug fix, not a new feature. Dropdowns work but autocompletes don't; looking into it. https://github.com/materializecss/materialize/blob/v1-dev/js/dropdown.js#L378

ChildishGiant commented 3 years ago

Okay so for some reason it's enabled by default on dropdowns but not for autocompletes (and the option is undocumented). I'll fix the docs but what do we all think about enabling it by default? I don't see any reason why not, I for one never scroll to something using my arrow keys with the hope I can't see it. That turns out to break things ... the plot thickens