search

pacocoursey / cmdk

Fast, unstyled command menu React component.
https://cmdk.paco.me
MIT License
9.68k stars 279 forks source link

Disable autofocus on mobile devices #127

Open rajbirjohar opened 1 year ago

rajbirjohar commented 1 year ago

When the menu is open on mobile devices, the <Command.Input /> element grabs focus automatically which is expected.

Now the issue is that the mobile keyboard also pops up and covers most of the items. Is there a way to disable the auto focus on mobile devices? I've already tried a number of possible solutions such as preventDefault(), setting autoFocus={false}, setting tabIndex="-1", creating a second "hidden" input (which also grabbed focus) and nothing worked. It's kind of a pain to open the menu and then have to collapse the keyboard every time I want to scroll down.

Am I missing something or is it explained in the documentation somewhere?

pacocoursey commented 1 year ago

Yeah this is annoying, what you want is to change the onOpenAutoFocus event from Radix's Dialog.Content component, but we currently don't support passing props through to that element.

rajbirjohar commented 1 year ago

That makes sense @pacocoursey. Would we be expecting this to come out in a future release? Or would it be a difficult feature to implement? I can try taking a look.

eternity4318 commented 8 months ago

is there an update or workaround for this?

eternity4318 commented 8 months ago

213 https://github.com/pacocoursey/cmdk/pull/213

ImJustChew commented 2 months ago

Are there any plans to fix this? and are there any temporary workarounds for this?

Jayprecode commented 3 weeks ago

I'd suggest you set the font-size of the to 16px for mobile device specifically to prevent autofocus, especially on ios..

This might solve your problem, just a suggestion tho