Input does not block when loading prop is passed

[waitstop]

Environment

---

• Operating System: Linux
• Node Version: v18.20.3
• Nuxt Version: 3.14.159
• CLI Version: 3.15.0
• Nitro Version: 2.10.4
• Package Manager: pnpm@8.15.6
• Builder: -
• User Config: default
• Runtime Modules: @nuxt/ui@2.19.2

• Build Modules: -

Version

v2.19.2

Reproduction

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

Description

The Input component does not block user interaction when the loading prop is passed.

Additionally, this issue is reproducible even on the documentation website. The example provided for the loading prop in the documentation exhibits the same behavior, where the input remains interactive despite being in a loading state

Expected Behavior

When the loading prop is true, the input field should be disabled

Actual Behavior

The input field remains interactive despite the loading prop being passed

Additional context

• Browser: [Google Chrome 131.0.6778.69, Firefox 131.0.3]

Logs

[waitstop]

In the Input component, the loading prop is not taken into account when setting the disabled attribute:

<input
  :disabled="disabled"
  ...
>
...

In contrast, the Button component:

<ULink 
  :disabled="disabled || loading"
  ...
>
...

[benjamincanac]

This is intended to prevent focus blurring out of the Input when typing for example.

[waitstop]

This is intended to prevent focus blurring out of the Input when typing for example.

Thank you for your response! However, according to the documentation, the expected behavior for the loading prop is to both show a loading icon and disable the Input.

Use the loading prop to show a loading icon and disable the Input