Button remains in pressed state when opening a modal

[axelthat]

Provide a general summary of the issue here

Press a button to open a modal. Inspect button's html and you can see the button has the attribute data-pressed=true. It also doesn't go away when you're focusing/clicking inside a modal.

🤔 Expected Behavior?

Button should not remain in pressed state.

😯 Current Behavior

Button remains in pressed state.

💁 Possible Solution

No response

🔦 Context

I have an outline button that animates to having a black background on pressed/hovered state. When the button is pressed to open a modal, the black background is still visible which is distracting.

🖥️ Steps to Reproduce

https://stackblitz.com/edit/vitejs-vite-ydyoxcq5?file=src%2FApp.tsx

Version

1.9.0

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

Stackblitz

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[snowystinger]

Thanks for the issue. Unfortunately, changing how it behaves right now would be a breaking change. That said, we're aware of it and had to do a workaround for it in our own implementation. This is less than ideal however.

We'd like a prop on MenuTrigger/DialogTrigger/Select/Picker/DatePicker/etc, name tbd , which just needs to not set isPressed on the press responder. Examples of places to look to apply:

react-spectrum/packages/react-aria-components/src/Dialog.tsx

Line 84 in 61f6f42

<PressResponder {...triggerProps} ref={buttonRef} isPressed={state.isOpen}>

react-spectrum/packages/react-aria-components/src/Menu.tsx

Line 89 in 61f6f42

<PressResponder {...menuTriggerProps} ref={ref} isPressed={state.isOpen}>

See

react-spectrum/packages/@react-spectrum/s2/src/DialogTrigger.tsx

Line 29 in 61f6f42

<PressResponder isPressed={false}>

where we work around this currently

possible names

• persistPressStateWhenOpen
• isPressedWhenOpen
• consideredPressedWhenOpen
• notPressedWhenOpen