fix(button): blur button to remove pressed state after modal opens (#…

[Ch1C0rj]

…8339)

This PR fixes issue #8339 where a button remains in a data-pressed="true" state after opening a modal using DialogTrigger.

The fix ensures that the button blurs on click, removing the pressed state immediately after interaction.

Behavior Before
Clicking a button that opens a modal caused it to remain visually "pressed"

data-pressed="true" would persist even while the modal was open

This created a distracting UI effect, especially with outlined/animated buttons

Behavior After
The button now calls .blur() on click

The data-pressed attribute is removed as expected

The visual feedback resets properly after modal opens

Fix Location
The fix was added directly to the JSX inside packages/@react-spectrum/button/src/Button.tsx by adding an onClick handler:

onClick={(e) => {
e.currentTarget.blur();
props.onClick?.(e);
}}

Existing button behavior and modal triggering remain unaffected

No breaking changes introduced

[snowystinger]

Thanks for the interest. Please have a read through this comment #8339 (comment) and please add some comments as to why your solution differs from the proposed solution. We'd like to know what the reasoning was.

In addition, it looks like the yarn lock was updated, this should not be the case, please revert that file