[USelectMenu] async search combined with loading removes focus from input field

[rigtigeEmil]

Environment

• Operating System: Windows_NT
• Node Version: v19.8.1
• Nuxt Version: 3.8.1
• CLI Version: 3.10.0
• Nitro Version: 2.8.1
• Package Manager: yarn@1.22.19
• Builder: -
• User Config: ssr, typescript, devtools, vue, runtimeConfig, ui, modules, extends, app
• Runtime Modules: @nuxt/ui@2.11.1-28378038.b22bd70, @pinia/nuxt@0.5.1
• Build Modules: -

Version

2.11.1

Reproduction

https://stackblitz.com/edit/nuxt-ui-nqrf9b?file=app.vue

Description

When using an async searchable USelectMenu that sets a loading state while fetching results removes focus from the input field when the loading state changes.

Additional context

No response

Logs

No response

[benjamincanac]

Indeed, you should not use the loading prop for this behaviour as it will disable the button. This should be used when submitting a form for example.

You're trying to show the loading state when searching right? Would this #520 fix your issue?

[rigtigeEmil]

Exactly - and yes, #520 would fix it (although it'd be nice to be able to customize it with a slot). I'll await the PR. Thanks!

[benjamincanac]

@rigtigeEmil I've changed my mind, you can now use the loading prop and it will no longer disable the SelectMenu!

[rigtigeEmil]

@benjamincanac Fantastic! Thanks again. Looks great 👍