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.

[LouisJackson]

I can confirm this is still happening. Any update on this?

One workaround is to use the isPending state from React 19's useFormAction hook.

[joshuajaco]

This issue appears to be caused by this React bug.

It occurs even without passing isDisabled or isPending, specifically when exiting hover on the button.

I traced it to this line in useHover:

react-spectrum/packages/@react-aria/interactions/src/useHover.ts

Line 166 in 393c8b0

setHovered(false);

Even replacing that line with a no-op setState still triggers the same behavior.

Both isDisabled and isPending also lead to that line via this effect:

react-spectrum/packages/@react-aria/interactions/src/useHover.ts

Lines 207 to 214 in 393c8b0

	useEffect(() => {
	// Call the triggerHoverEnd as soon as isDisabled changes to true
	// Safe to call triggerHoverEnd, it will early return if we aren't currently hovering
	if (isDisabled) {
	triggerHoverEnd({currentTarget: state.target}, state.pointerType);
	}
	// eslint-disable-next-line react-hooks/exhaustive-deps
	}, [isDisabled]);

Minimal reproduction without react-aria:

function App() {
  return (
    <form action={() => new Promise((resolve) => setTimeout(resolve, 5000))}>
      <Button />
    </form>
  );
}

function Button() {
  const [, setState] = useState(0);
  const { pending } = useFormStatus();
  return (
    <button type="submit" onPointerLeave={() => setState((c) => c + 1)}>
      {pending ? "Pending" : "Submit"}
    </button>
  );
}