Scrolling to bottom of window when opening dropdown with spacebar

[brada1703]

Hey guys,

Firstly, I would like to say thanks for all of your hard work! 👏 This is a great plugin and I appreciate everyone who has put in the hard work to make it happen. 👍

This is a small feature request and I will hopefully come back with a pull request in a bit, but if someone wants to beat me to it, I'd be happy with that as well. Also, I hope that my temporary solution may help others out there with the same problem.

Is your feature request related to a problem? Please describe.
Yes. The problem is that whenever I fill out a form with Choices.js, I open the select box with the spacebar. Usually this would merely open the select box and that's it. However, here, I see that the browser scrolls all of the way to the bottom of the page, which is suboptimal on a long form.

Describe the solution you'd like
Requested solution: When opening select box with spacebar, there is no scrolling on the page (or at least, not scrolling to the very bottom. Maybe putting the select box into view would be good UX.)

Describe alternatives you've considered
I am currently using the following script to get around this problem. However, it would be awesome if it were native 🤓

window.onkeydown = function(e) {
    if(e.keyCode == 32 && e.target == document.querySelector('div.choices.is-focused')) {
        e.preventDefault()
        return false
    }
}

Additional context
This behaviour was seen on Chrome Version 79.0.3945.117. I have not tested it on Firefox, Safari, or any other browser. Behaviour may very.

[brada1703]

Also, regarding scrolling, it would be great if, upon showDropdown the element appeared at the top of the viewport to give the most room possible to view the select options. I will also try to put this in a pull request.

In the meantime, here is a solution. Hopefully it helps someone.

const allChoices = doc.querySelectorAll('.choices .choices__inner select')
for (let i = 0; i < allChoices.length; i++){
    allChoices[i].addEventListener('showDropdown', function(){
        // If you have a navbar, otherwise set this to 0
        const navbarHeight = 60
        let element = document.getElementById(this.id).parentNode
        let distanceToTop = element.getBoundingClientRect().top
        let distanceToScroll = distanceFromTop < navbarHeight ? 0 : distanceToTop - navbarHeight
        window.scrollBy({
          'behavior': 'smooth',
          'left': 0,
          'top': distanceToScroll
        });
    })
}

[mtriff]

@brada1703 a pull request would be great!