adobe / adobe/react-spectrum

[RAC] isDisabled on ToggleButtonGroup not applied to children

Open
#7,798 2 comments 0 reactions 0 assignees View on GitHub
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

According to the documentation, setting `isDisabled` on ToggleButtonGroup should set it for all child ToggleButton:s. When testing, this doesn't seem the case.

Example:

```tsx

Toggle button 1
Toggle button 2

```

Renders the buttons as enabled.

### 🤔 Expected Behavior?

ToggleButton:s should be disabled when ToggleButtonGroup is

### 😯 Current Behavior

Sandbox @ https://codesandbox.io/p/sandbox/busy-mahavira-vhxxg7?file=%2Fsrc%2FApp.js%3A16%2C5

The disabled toggle buttons have a red color, and do not show the pink outline when hovered. I expect all three groups to be in this state.

### 💁 Possible Solution

_No response_

### 🔦 Context

Worked around the issue by using a ToggleButtonContext.Provider, but did not expect this to be needed.

### 🖥️ Steps to Reproduce

Sandbox: https://codesandbox.io/p/sandbox/react-aria-components-template-g7wmmk

The disabled toggle buttons have a red color, and do not show the pink outline when hovered. I expect all three groups to be in this state.

### Version

react-aria-components@1.6.0

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

Safari

### 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

Research direction

Start with the ToggleButtonGroup and ToggleButton behavior described in the issue, then reproduce it using the linked CodeSandbox examples. Confirm that setting isDisabled on the group disables all child buttons and that the result matches the expected disabled appearance and interaction behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
accessibility, frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.