[RAC] isDisabled on ToggleButtonGroup not applied to children

[lucaas]

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:

        <ToggleButtonGroup isDisabled>
          <ToggleButton>Toggle button 1</ToggleButton>
          <ToggleButton>Toggle button 2</ToggleButton>
        </ToggleButtonGroup>

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

[reidbarber]

This is happening because no id is provided to those ToggleButtons, so it isn't functioning as a group and not getting the disabled state from the group context:

react-spectrum/packages/react-aria-components/src/ToggleButton.tsx

Lines 53 to 57 in 6cd19f0

	let {buttonProps, isPressed, isSelected, isDisabled} = groupState && props.id != null
	// eslint-disable-next-line react-hooks/rules-of-hooks
	? useToggleButtonGroupItem({...props, id: props.id}, groupState, ref)
	// eslint-disable-next-line react-hooks/rules-of-hooks
	: useToggleButton({...props, id: props.id != null ? String(props.id) : undefined}, state, ref);

We either need to ensure id's are required when ToggleButtons are used in a group, or be sure the disabled state gets propagated when no id is provided.

[lucaas]

Thank you - that makes sense! I removed a little too much when making the example. Adding the ids does make it work as expected and instead highlights the issue I was originally investigating.

When buttons are disabled through the ToggleButtonGroup, they still get [data-hovered] applied to them when hovered. This seems inconsistent with how they work when the individual ToggleButtons are disabled. Is this the intended behaviour?

See sandbox @ https://codesandbox.io/p/devbox/heuristic-satoshi-4df743?file=%2Fsrc%2FApp.js&workspaceId=ws_8MDXNCcNvfTUCse2AYEHbh