mui / mui/material-ui

[chip] The `skipFocusWhenDisabled` prop skips the focus when set to false and when disabled is true

Open
#40,096 8 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

scope: chip type: bug v10.x
Dominant language
JavaScript
Stars
99.1k
Forks
32.5k
Avg merge
2d 17h
Merged PRs (30d)
106

Description

Duplicates
  • I have searched the existing issues
Latest version
  • I have tested the latest version
Steps to reproduce 🕹

Link to live example:

Steps:

  1. Go to the Mui chip link https://mui.com/material-ui/react-chip/
  2. Goto the clickable section
  3. update the example with the following code
    <Chip label="Clickable" disabled skipFocusWhenDisabled={false} onClick={handleClick} /> <Chip label="Clickable" variant="outlined" onClick={handleClick} />
Current behavior 😯

If you inspect the first chip component that is disabled if you set skipFocusWhenDisabled={true} the tabIndex is set to -1 which I think is correct if you then set skipFocusWhenDisabled={false} the tabIndex is still -1 which I think is incorrect.

Expected behavior 🤔

When disabled is set to true and skipFocusWhenDisabled={false} the Index should not be -1 it should allow it to have focus.

Context 🔦

No response

Your environment 🌎
npx @mui/envinfo
  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the clickable Chip example at https://mui.com/material-ui/react-chip/ and reproduce the behavior using the two Chip snippets in the issue. Trace how disabled and skipFocusWhenDisabled determine tabIndex, then add or update coverage for both prop values; done means the observed tabIndex and focus behavior match the documented expectation.

Written by the indexing model from the issue text.

Assessment

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.