Spacebar page scroll affecting search

Hello Community,

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!

Thanks for the help in advance. :slight_smile:

Kane


Hey @kanegarland,

This is strange behaviour! When you’re focused/selected on an input the spacebar scroll should be disabled.

Could you link the read-only link, curious as to why this would be happening!

Thanks

Hi @Thomas_92,

Thanks for your reply! Please see the read only link: https://preview.webflow.com/preview/watb?utm_source=watb&preview=d6900c450b1d75b63666223c13ae939a&mode=preview

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 :slight_smile:

Thank you
Kane

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!

2 Likes

Amazing! Thank you! :smile:

1 Like

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:

CloudApp

Hi @rileyrichter,

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.

Webflow = :heart:

All the best,
Kane & the watb team

2 Likes

Thanks for being so understanding, @kanegarland! I appreciate you so much! :webflow_heart:

If there’s any help we can provide with your interactions, just let us know! :smiley:

2 Likes

Hi @rileyrichter,

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?

Thanks for your help in advance! :slightly_smiling_face:

Kane

1 Like

Hi, @kanegarland! I think I know a good way to handle this. Testing, and then I’ll make you a quick video. :slight_smile:

Hi, @kanegarland - I’m using just a bit of custom code to accomplish this, but here’s a video overview of a solution:

CloudApp

Here’s a link to the focus method overview I showed in the video:

And here is the code I placed in the head section of the page:

<script> focusMethod = function getFocus() { document.getElementById("search").focus(); } </script>

And here is the code I placed in the embed:

<div class="dropdown-toggle" onclick="focusMethod()"><img src="https://assets.website-files.com/5d0119f42bca93322f75facd/5d0119f42bca93ab2275fba0_magnifying-glass.svg" width="30" alt="Search Icon" data-w-id="dacd58a9-e042-7bba-50c7-e213e6e44b5c" /><img src="https://assets.website-files.com/5d0119f42bca93322f75facd/5d0119f42bca9311e875fdcc_close.svg" width="28" alt="Close Icon" data-w-id="0f8ba869-b904-24b9-4b16-616fb9c417ab" class="image-6" /></div>

I hope this helps! Happy to help further if needed! :smiley:

1 Like

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/

Thanks!

Jonny

Ooo, @outlawjon_w!! That looks slick and is working like a champ for me too! Strong work on this! :muscle: Your team moves fast, I love it.

I’m glad I could help! Let us know if you need anything else!

3 Likes

@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.

We’re also wrestling with that same issue on our site, https://www.aiddata.org/.

1 Like

Hey @johnwcuster - Interesting! I’m afraid it’s not something I know how to do, as it’s probably requires Javascript and that rules me out. :frowning:

Hope someone else can help! @rileyrichter maybe?

Cheers

Hello, @johnwcuster and @outlawjon_w!

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! :webflow_heart: 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!

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.