Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

🐛 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)

Issue Analytics

State:
Created a year ago
Comments:5 (3 by maintainers)

Top GitHub Comments

1reaction

rostero1commented, Apr 15, 2022

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.

0reactions

LFDanLucommented, Apr 20, 2022

Just as a fyi, I encountered this same issue here: https://github.com/adobe/react-spectrum/issues/2867#issuecomment-1045050777. A possible isPressed cleanup improvement is mentioned there, closing this issue as a dupe for now.

Top Results From Across the Web

useSelect can't use click to open select anymore and ... - GitHub

Bug Report I have implemented the useSelect in my dropdown/select ... useButton doesn't reset its press state when manually focusing on ...

How to make an element correctly reset its state and pass ...

You are setting a focus, whenever some transition finishes. But it is incorrect, you have to focus your input only when "open" transition ......

useButton – React Aria - React Spectrum Libraries

Documentation for useButton in the React Aria package. ... focus behavior, and ARIA props for both native button elements and custom element types....

useComboBox – React Aria - NET

Documentation for useComboBox in the React Aria package. ... that browser focus remains within the ComboBox <input> element even when interacting with the ......

Inconsistent behavior among browsers when clicking on buttons

I noticed browsers were inconsistent in how they handle a click on a button element. Some browsers choose to focus on the button....