How to place the cursor in mobile search box?

[Stephen-Gates]

When I use search on mobile (iOS 15.3.1) the cursor is not in the search box. I have to tap the search box before I can start typing.

Is there a way to place the cursor in the search box so the keyboard is automatically displayed and the user can start typing immediately?

[squidfunk]

Unfortunately, iOS doesn't support that properly – for some reason, it will focus the input field without bringing up the keyboard. The user must click the input field for the keyboard to appear. When we would call .focus() after the mobile search is ready, the placeholder is removed, as the input field is focused but no keyboard is shown – more confusing than just expecting a click:

RPReplay_Final1647971439.mov

Years ago, this was possible and worked well, but at some point, Apple changed it.

[navhaxs]

Hi hello @squidfunk ! Just discovered mkdocs-material these past few days and deployed my first website with it! ❤️

I just wanted to comment that on mobile, the current UX is not very clear about the search box being a search box.

I was showing off my new site to my brother on his mobile (first time seeing it on mobile, mind you). To us as "new users" the search box really just looks like a material header bar and not really an input field that needs to be tapped on. The grey "Type to start searching" actually seems to be the input box. I kept tapping it and nothing happened 😅, again I say this as a brand new first time user.

I legitimately thought it was a bug in mkdocs-material until a few minutes ago... I even navigated to the mkdocs-material homepage and still couldn't work out I needed to tap the top white "box". I told my brother I'll look into it... (hence me finding this GitHub issue 😅)

Perhaps adding a search magnifying glass icon to the right side would indicate to the user that they can 'tap' in that white space? Or have more of a border around the search textbox to visually distinguish it as a search box than header.

(Since the searchbox can't be auto-focused)

Anyways just my 2c.

[kamilkrzyskow]

Just checked it on Android Firefox, and it too, doesn't autoselect the input field. I don't browse sites on my phone all that much (since it's always an inferior experience), so I didn't even notice the lack of auto keyboard.

However, I checked on https://motioncanvas.io/ docs run on top of Docosaurus and it did automatically open and close the keyboard when I pressed the magnifying glass and cancel repetitively. (And the search box has a nice border which pops it out, tough I do understand it's not really Material design)

Therefore, I believe that the lack of auto keyboard could be seen as a bug.

[squidfunk]

Thanks for your feedback. The UI is actually mirroring Material Design specs which requires an arrow to allow the user to go back, i.e., close the search. Thus, we can't add a magnifying glass here. However, we might do a slight face lifting of the mobile search at some point, but it's currently not a priority. You can change the icon by overriding the theme, if you want to 😊

However, I checked on https://motioncanvas.io/ docs run on top of Docosaurus and it did automatically open and close the keyboard when I pressed the magnifying glass and cancel repetitively. (And the search box has a nice border which pops it out, tough I do understand it's not really Material design)

Therefore, I believe that the lack of auto keyboard could be seen as a bug.

We're mote than happy to accept PRs that fix the issue on all phones once and forever.

[squidfunk]

Update: I think this should be finally resolved in 9.2!