Button data-pressed with scale usage causes data-pressed state to switch between true/false

[alexcarpenter]

Provide a general summary of the issue here

When scaling a button using data-pressed:scale-90 the edges causes the pressed state to switch between true false.

🤔 Expected Behavior?

It should behave like the default :active experience for buttons.

😯 Current Behavior

Click a buttons edge and scale the button. See the pressed state switch between true/false when moving the mouse slightly.

💁 Possible Solution

No response

🔦 Context

Scale a button based on data-pressed state.

🖥️ Steps to Reproduce

Stackblitz showing the difference in experience between tying into data-pressed vs :active https://stackblitz.com/edit/rmxqhpht?file=src%2Findex.css

bug.mov

Version

^1.17.0 from stackblitz demos

What browsers are you seeing the problem on?

Chrome, Safari, Firefox, Microsoft Edge

If other, please specify.

No response

What operating system are you using?

Mac

🧢 Your Company/Team

Clerk

🕷 Tracking Issue

No response

[snowystinger]

Seems like a really big scaling factor. You could add a wrapping div that is the actual button and then just scale the internals?

[alexcarpenter]

@snowystinger yeah, exaggerated the scale effect for demo purposes. We are simply scaling by .97 and still experience the same issue when clicking on the edges.

You could add a wrapping div that is the actual button and then just scale the internals

That is what we ended up exploring yeah, but increases complexity of the button component that we were trying to avoid. Also might just scale using the :active selector if this is not something you'd consider solving in the library. Thought i'd share nonetheless.

[snowystinger]

Might be worth exploring https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events#pointer_capture
Though this may conflict with some handling we do when a mouse leaves and comes back to a target as that would not cause a pointer out possibly. We also specifically undo (release the capture) for touch because of a similar interaction pattern. I think in general it's best if an interactive target doesn't actually resize though, so I'd probably still recommend doing what you're doing.

We should probably do it for ourselves in Spectrum as well.