mui / mui/base-ui

[radio group] disabled radio group recieves focus

Open
#4,174 3 comments 1 reaction 0 assignees View on GitHub
component: radio group
Dominant language
TypeScript
Stars
10.9k
Forks
543
Avg merge
1d 20h
Merged PRs (30d)
101

Description

# Bug report

## Current behavior

The native HTML radio when disabled, does not receive focus on keyboard tab, or programatic focus. The Base UI Radio Group will gladly take focus even though it's disabled.

## Expected behavior

`RadioGroup` and `Radio` when disabled should not receive focus.

## Reproducible example

Open Blitz and keyboard tab. Programatic focus also works
https://stackblitz.com/edit/bf5bx4pd-gxtnshkq?file=src%2FApp.tsx

## Base UI version

For example v1.2.0

## Which browser are you using?

Edge

## Which OS are you using?

Mac OS

## Additional context

I believe the issue is due to `tabIndex=0` being set on the Radio, even though it's `disabled`.

Im trying to build a "focus first field" on a form when it's mounted, and when a RadioGroup is used as the first element, `tabbable` (the library Im using to determine focus) is seeing the RadioGroup as a valid target.

There's also a strange mounting behavior going on with RadioGroup, it first mounts with `tabIndex=-1` for RadioGroups that are not disabled, then after a render they appear with `tabIndex=0`.

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.