Searchable fields in Action modals do not focus correctly

[puzzledmonkey]

• Laravel Version: 10
• Nova Version: 4.33.2
• PHP Version: 8.2
• Database Driver & Version: n/a
• Operating System and Version: n/a
• Browser type and version: any
• Reproduction Repository: https://github.com/###/###

Description:

When opening a searchable input in an Action modal, the input does not focus correctly.

Detailed steps to reproduce the issue on a fresh Nova installation:

Similar to https://github.com/laravel/nova-issues/issues/6276

• Create an Action modal with a searchable dropdown field
• Note that when clicking the dropdown opens but the search input part is not focused automatically any more and you need to click again in the input to actually start typing

[crynobone]

Yes, this is the expected behavior to solve bug reported in #6276

[puzzledmonkey]

So now users will need to click twice in order to start typing? That seems like a regression to me, the functionality isn't as smooth as it used to be here.

Is there no other solution?

[crynobone]

I would argue the current behavior make SearchInput behave similar to <select />, you can toggle options on SearchInput and <select /> by pressing the spacebar key.

[puzzledmonkey]

Sorry @crynobone I don't really believe that.

If that's the case, why does the 2nd, 3rd time etc, that you click the dropdown, it focuses as expected with one click.

It's only the first time you open the search input dropdown that it doesn't focus correctly.

It looks like a bug to me..?

[puzzledmonkey]

Also, line 198 of SearchInput clearly tries to focus the search input field (which works on the 2nd, 3rd, etc. time you open it).

Please can you re-open this issue @crynobone as it's definitely a bug.

[puzzledmonkey]

@crynobone @davidhemphill i managed to fix this like so - just wrap line 198 in a timeout so the focus trap initiates first, and THEN the search field is focused. this works the first time as well as any subsequent times.

setTimeout(() => {
  this.$refs.search.focus()
}, 0)