docsearch
docsearch copied to clipboard
algolia
Page scroll to the bottom of page when closing the modal on Safari
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 + Kto open the modal - Press
escto 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
Hey, are you able to reproduce on our documentation? docsearch.algolia.com
(Sorry I'm not on a computer rn)
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>
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 🤷♂️
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
I don't know if it is anything or a particlular kind element that needs to be focusable by the browser.
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
Hi there,
I was able to fix this on your dom by adding this just before the end of the body
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!
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?
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
Yup, still have it in latest Safari 15. I see it whenever I click into it or Cmd+K.
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)
@shortcuts Were you able to investigate this further? Let me know if I can be of help at all :).
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
inputinside a fixeddivfixes 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 aninput, but aniframe.But replacing the
iframeby the emptyinputfixes 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.
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.
