useButton doesn't reset its press state when manually focusing on another element within `onPressStart`

[rostero1]

🐛 Bug Report

Calling inputRef.current.focus() from within onPressStart, as in the search field example does not reset the button's isPress state when using Enter to initiate the click.

🤔 Expected Behavior

isPressed should be false and the color of the button should go back to gray.

😯 Current Behavior

After hitting enter on the button isPressed stays true and the button is red. Pressing it twice will toggle it back.

💁 Possible Solution

🔦 Context

💻 Code Sample

https://codesandbox.io/s/morning-sky-vtetyt?file=/src/App.js

🌍 Your Environment

Software	Version(s)
react-spectrum	@react-aria/button@3.4.3
Browser	Chrome
Operating System	MacOS

🧢 Your Company/Team

🕷 Tracking Issue (optional)

[snowystinger]

Just curious, could you do the shift during onPress instead of start? Seems like that's better for a user as well so it doesn't move focus while they are interacting with the element.

Does seem like we should make sure that gets cleaned up though.

[rostero1]

@snowystinger thanks a lot for the reply. This project has been truly amazing and I'm also learning so much from it.

If I focus from just within onPress, then the keyboard will close and reopen on mobile. Running focus from within both onPress and onPressStart seems to resolve the issue.

[snowystinger]

Ahhhh, what is the component you are implementing? We have a couple that deal with this very issue, but want to send you to the right example

[rostero1]

I'm trying to recreate the search example. If I hide the remove button, as shown in the demo, then the issue will likely resolve itself. It's probably a better UX than keeping it up all the time anyway.

[LFDanLu]

Just as a fyi, I encountered this same issue here: #2867 (comment). A possible isPressed cleanup improvement is mentioned there, closing this issue as a dupe for now.