Button does not recognize the pending state of useFormStatus

[ryo-manba]

Provide a general summary of the issue here

The Button using useButton and RAC Button doesn't reflect the pending state from useFormStatus.

🤔 Expected Behavior?

The button should reflect the pending state when interacting with it using Enter, Space, or click.

😯 Current Behavior

The Button created with useButton does not reflect the pending state when pressing the Enter key.
In React Aria Components, interactions via Enter, Space, or click do not trigger the pending state.

💁 Possible Solution

No response

🔦 Context

No response

🖥️ Steps to Reproduce

1. Try interacting with the button using Enter, Space, and click.
2. Observe that the pending state is not reflected as expected.

You can use the following sandbox to reproduce the issue:
CodeSandbox: infallible-meadow-yycwxf

button-pending-state-issue.mov

Version

react-aria: 3.36.0, react-aria-components: 1.5.0

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

macOS 14.6.1

🧢 Your Company/Team

NextUI

🕷 Tracking Issue

[BUG] Button not recognizing pending state of useFormStatus hook · Issue #4397 · nextui-org/nextui

[snowystinger]

Looks like there is a timing issue of some variety. I used isPending and that seems to work for a slow press (or possibly it's the second press) https://react-spectrum.adobe.com/react-aria/Button.html#pending

Someone will need to dive deeper on this one.

Of note, React's recommendation of how to display a pending state is bad for accessibility. Disabling the button will lose focus to the body and an AT user will not get any feedback as to what has happened.
It is better to use isPending on our components, though see the accessibility section under the link I provided for more information.