adobe / adobe/react-spectrum

[useToolbar] Two toolbar items receive focus event, instead of one.

Open
#5,457 2 comments 0 reactions 0 assignees View on GitHub
bug has workaround
Dominant language
TypeScript
Stars
15.9k
Forks
1.6k
Avg merge
3d 9m
Merged PRs (30d)
59

Description

### Provide a general summary of the issue here

In the toolbar, when controlling the focus programmatically, via JS event handlers, two items receive the focus event when navigating to the toolbar with `Tab`. See "Steps to reproduce" below for an example.

### 🤔 Expected Behavior?

See "Steps to reproduce" below

### 😯 Current Behavior

See "Steps to reproduce" below

### 💁 Possible Solution

From what I investigated in the code, that's because there are two focus events - One is sent programmatically in `useToolbar` from `onFocus` and the other bubbles to the last button. The solution would be to stop the event propagation from the toolbar's `onFocus`

### 🔦 Context

_No response_

### 🖥️ Steps to Reproduce

[This sandbox](https://codesandbox.io/p/sandbox/toolbar-focus-issue-s2q33g) illustrates the issue.

Steps to reproduce:
- navigate to the toolbar using `Tab`
- select the middle item ("Cut"). Notice that the button turns green (that's programmatically applied via JS)
- navigate away from the toolbar using `Tab`
- navigate back with `Shift + Tab`

Expected:
- The previous item is selected (i.e. green), and only that one.

Actual
- Both the previous item and the last item (i.e. "Paste") are selected (i.e. green)

### Version

"@react-aria/toolbar": "3.0.0-beta.0"

### What browsers are you seeing the problem on?

Chrome

### If other, please specify.

_No response_

### What operating system are you using?

MacOS

### 🧢 Your Company/Team

_No response_

### 🕷 Tracking Issue

_No response_

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.