Impossible to search on mobile with new DocSearch v3

[julien-deramond]

Prerequisites

• I have searched for duplicate or closed issues
• I have validated any HTML to avoid common problems
• I have read the contributing guidelines

Describe the issue

As soon as the DocSearch v3 popup is displayed from the offcanvas under 991px breakpoint, it is impossible to use the input and so to search in the documentation.

I don't think it is an issue coming from DocSearch v3 since search in https://docsearch.algolia.com/docs/how-does-it-work works pretty well on mobile. This is maybe coming from the fact that it is triggered from the offcanvas in the menu 🤷

Reduced test cases

Set your browser in responsive design mode at a width of 991px or under; or try it from a mobile phone.

1. Go to https://twbs-bootstrap.netlify.app/docs/5.1/getting-started/introduction/
2. Click on the "..." menu
3. Click on "Search" → Search popup is displayed
4. The input doesn't gain automatically the focus and clicking on it neither

You don't see it in the following .gif but I'm trying to click on the input 😇

What operating system(s) are you seeing the problem on?

Android, Linux

What browser(s) are you seeing the problem on?

Chrome, Firefox

What version of Bootstrap are you using?

v5.2.0 (current main branch)

[mdo]

Oh well crap, that's no good. Will dig in more (like tomorrow).