mui / mui/base-ui

[field] data-focused attribute persists when data-disabled

Open
#3,987 1 comment 1 reaction 0 assignees View on GitHub
component: field type: bug
Dominant language
TypeScript
Stars
10.9k
Forks
543
Avg merge
1d 20h
Merged PRs (30d)
101

Description

# Bug report / Feature request

With native HTML `` and ``, the elements are not focusable when disabled. Arguably, the same behavior should be reflected in the Base UI form components like `Field`, `Input`, `Select`, `Autocomplete`, `Combobox`, etc. This could be achieved by removing `data-focused` when `data-disabled` is added.

The current Tailwind workaround is to use a `not-data-disabled:data-focused: ...` modifier, or `focus-visible: ...` in cases where that would actually work instead. However, I don't think this is something consumers should have to implement. I don't think users expect `data-focused` to persist when `data-disabled`.

I do like that the `Button` component has the `focusableWhenDisabled` prop and it correctly defaults to `false`. This could be added to the form-related components, but I don't think there's a strong need. The primary issue is simply the persistence of `data-focused`.

Thanks for your help.

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.