I’ve found out the spacebar makes the page automatically scroll. This is frustrating when you have a search in the nav, when the user types more than one word the search closes.
Does anyone have a fix for this? We have a few sites that have this issue, only found out today and need a fix!
We figured its odd, the page that has a dedicated search does not’ have this issue… not sure if the dropdown is overriding the ‘typical behaviour’. Hopefully you can shed some light on this issue
Hello, @kanegarland! Thanks so much for reporting this issue. I’m investigating now and I already see what the problem is. I’m making a video to explain in more detail. I’ll post it here soon!
Hi, @kanegarland! This is happening due to some changes we’ve made recently to how the Navbar elements work. In an effort to make dropdowns more accessibility friendly, we added keyboard trigger events to them. A common trigger is using the space bar. I made a video to explain in more detail:
Thank you for making this video, we really do appreciate it.
It’s great that webflow is making things more accessible… as frustrating as fixing that glitch is we don’t mind remaking the dropdown through interactions if it means more people can use webflow built sites.
Thanks again for investigating and showing us how to fix this issue! Have a great day.
One last thing… We have built the interactions but noticed one tiny thing, doing it this way seems to have disabled the autofocus? Is there a way around this?
Hey @rileyrichter, I also work at Watb. Kane’s finished for the day.
Thanks so much for this, I’ve moved the close icon into a new div, and used your method and it works.
The only thing I did differently was put the JS in to the project settings head so it works on all pages. You can see it working here: https://watb.co.uk/
@rileyrichter@outlawjon_w Thanks for the examples! Very helpful! Do you know if there is a way to override Webflow’s scrolling behavior for the spacebar keyboard trigger in certain circumstances?
For example, in the site you reference ( https://watb.co.uk/ ), if you tab over to the “watb logo” and then tab 1 more so that the “services” dropdown is in focus and then hit the space bar, the dropdown opens and the page scrolls.
Thanks for pinging me here! These nav improvements are still a work in project, but the good news is that this has been addressed by the team! As a side note, our engineers rule!
Now if you republish your site, you should notice that using the space bar or the up and down arrows on a dropdown element no longer scroll the page!
Let me know if you have any other questions and I’ll be happy to help!