Page scroll to the bottom of page when closing the modal on Safari

daolf commented 2 years ago

Description

On Safari, when opening the search modal and then closing it without having made any search, the page scroll to the bottom of the page.

When searching something, it looks like the search box behave nicely.

Safari version: 14.1 Docsearch version: 3.0.0-alpha.42

https://user-images.githubusercontent.com/7622246/149235336-3516931f-a4a7-442d-9072-5462aad88362.mov

Steps to reproduce

Open Safari 14.1
Go to [https://www.scrapingbee.com/documentation]
Type cmd + K to open the modal
Press esc to close it
Window scroll to the bottom of the page

Live reproduction:

https://www.scrapingbee.com/documentation

Expected behavior

It should not scroll to the bottom of the page

Environment

OS: macOS 11.3.1
Browser: Safari 14.1
DocSearch version: 3.0.0-alpha.42

shortcuts commented 2 years ago

Hey, are you able to reproduce on our documentation? docsearch.algolia.com

(Sorry I'm not on a computer rn)

daolf commented 2 years ago

No, I was not, but it looks like at least one other project had the same issue:

https://github.com/facebook/docusaurus/pull/4188

I'm instantiating the search in the simplest way:

<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@alpha"></script>
<div class="mb-19 pr-15">
    <div id="search" placeholder="Search">
    </div>
</div>
<script>
    window.docsearch({
        // Your Search API Key
        apiKey: '<apiKey>',
        // The index populated by the DocSearch scraper
        indexName: 'scrapingbee_docs',
        // Your Algolia Application ID
        appId: '<APP-ID>',
        // Replace inputSelector with a CSS selector
        // matching your search input
        container: '#search',
        // Set debug to true to inspect the dropdown
        debug: false,
    });
</script>

daolf commented 2 years ago

Ok so I found out how to fix this.

After noticing that this bug didn't happen on Netlify deploy preview I wanted to understand why.

On Deploy preview mode, Netlify adds a "feedback" overlay. That overlay seemed to fix the bug.

Conclusion

Adding an empty input inside a fixed div fixes it.

Here is the updated structure of the HTML of our doc page:

<!DOCTYPE html>
<html lang="en">
    {{ partial "head" . }}
    <body>
        <div id="wrapper">
            <div id="content">
            <!--SearchBar-->
            <!--Content-->
            </div>
        </div>
        <!--Magic Fix-->
        <div class="fixed">
            <input type="text">
        </div>
    </body>
</html>

Looking at other issues it probably has to do with tabindex, like it looks like Safari doesn't like when you close the popup and the browser doesn't have any other input / "tabindexable" element to focus. The Netlify preview feature didn't add an input, but an iframe.

But replacing the iframe by the empty input fixes it 🤷‍♂️

shortcuts commented 2 years ago

Adding an empty input inside a fixed div fixes it. The Netlify preview feature didn't add an input, but an iframe.

So anything that fills the DOM along with the DocSearch component should fix this issue?

This is good to know, thanks for investigating, I'll try to reproduce in multiple cases to see if it's something we can handle

daolf commented 2 years ago

I don't know if it is anything or a particlular kind element that needs to be focusable by the browser.

jackmcdade commented 2 years ago

We're having this issue on https://statamic.dev and haven't been able to find a workaround yet.

Our open issue: https://github.com/statamic/docs/issues/707

daolf commented 2 years ago

Hi there,

I was able to fix this on your dom by adding this just before the end of the body

daolf commented 2 years ago

Still have no idea why this works though

jackmcdade commented 2 years ago

Hi there,

I was able to fix this on your dom by adding this just before the end of the body

~I tried that but it didn't work for me.~ Ah yes, i had it near the end, but not the very last thing. It worked!

daolf commented 2 years ago

Great!

mdo commented 2 years ago

I've just encountered this issue as well in trying to update Bootstrap's docs to DocSearch 3. See https://github.com/twbs/bootstrap/pull/35736. The problem can be seen in our staging deploy for that PR: https://deploy-preview-35736--twbs-bootstrap.netlify.app/docs/5.1/getting-started/introduction/.

Anything else we can do to help debug?

shortcuts commented 2 years ago

Hey, thanks for coming back to this @mdo.

Are you also testing with Safari 14? I'm not able to reproduce with Safari 15.x anymore

edit: managed to reproduce, you need to scroll a bit before hitting cmd k

mdo commented 2 years ago

Yup, still have it in latest Safari 15. I see it whenever I click into it or Cmd+K.

shortcuts commented 2 years ago

It seems that this part is triggered on escape 🤔 I'll try to investigate on the Autocomplete side. (cc @sarahdayan @francoischalifour if you want to double check)

sarahdayan commented 2 years ago

mdo commented 2 years ago

@shortcuts Were you able to investigate this further? Let me know if I can be of help at all :).

DanielSGaspar commented 1 year ago

Ok so I found out how to fix this.

After noticing that this bug didn't happen on Netlify deploy preview I wanted to understand why.

On Deploy preview mode, Netlify adds a "feedback" overlay. That overlay seemed to fix the bug.

Conclusion

Adding an empty input inside a fixed div fixes it.

Here is the updated structure of the HTML of our doc page:
<!DOCTYPE html>
<html lang="en">
    {{ partial "head" . }}
    <body>
        <div id="wrapper">
            <div id="content">
            
            
            </div>
        </div>
        
        <div class="fixed">
            <input type="text">
        </div>
    </body>
</html>
Looking at other issues it probably has to do with tabindex, like it looks like Safari doesn't like when you close the popup and the browser doesn't have any other input / "tabindexable" element to focus. The Netlify preview feature didn't add an input, but an iframe.

But replacing the iframe by the empty input fixes it 🤷‍♂️

As you mention here, the issue is with the focus. So another fix would be to blur the input before closing the modal. This way safari will not try to search for another input to focus and this will also fix the issue.

ryanleichty commented 11 months ago

This issue also exists on https://remix.run/. When you're at the top of the page in Safari (v16.6) and open and close the modal with esc, it scrolls to the bottom of the page.

algolia / docsearch