Joy UI: Disabled Link IconButton appearance appears to still be enabled
Open
@siriwatknp is already working on this.
Since Aug 12, 2024.
on hold
package: joy-ui
scope: icon button
- Dominant language
- JavaScript
- Stars
- 99.1k
- Forks
- 32.5k
- Avg merge
- 2d 17h
- Merged PRs (30d)
- 106
Description
Steps to reproduce
Link to live example: https://codesandbox.io/s/peaceful-estrela-dr8zfz
Steps:
- Create a Joy UI IconButton
- Set its component prop to either
"a"orLinkfromreact-router-dom - Set its
disabledprop totrue - The button is still clickable and visually appears to be enabled because it is
Current behavior
The button appears to still be enabled even though it shouldn't be.
Expected behavior
The button should be disabled (no pointer-events, less contrast with the background, etc...)
Context
I am simply trying to have a link button be disabled.
My guess: in the DOM, the disabled prop cannot be applied to the a element, which messes up the styles since the selector is literally:
.css-randomId-JoyIconButton-root:disabled {
// rules
}
Your environment
Tested on Chrome version 127.0.6533.89 (Official Build) (arm64)
npx @mui/envinfo
System:
OS: macOS 14.6
Binaries:
Node: 22.4.1 - /opt/homebrew/bin/node
npm: 10.8.2 - /opt/homebrew/bin/npm
pnpm: Not Found
Browsers:
Chrome: 127.0.6533.100
Edge: Not Found
Safari: 17.6
npmPackages:
@emotion/react: ^11.11.4 => 11.13.0
@emotion/styled: ^11.11.5 => 11.13.0
@mui/base: 5.0.0-beta.42
@mui/core-downloads-tracker: 6.0.0-dev.240424162023-9968b4889d
@mui/joy: ^5.0.0-beta.48 => 5.0.0-dev.240424162023-9968b4889d
@mui/private-theming: 6.0.0-dev.20240529-082515-213b5e33ab
@mui/styled-engine: 6.0.0-dev.20240529-082515-213b5e33ab
@mui/system: 6.0.0-dev.240424162023-9968b4889d
@mui/types: 7.2.15
@mui/utils: 6.0.0-dev.20240529-082515-213b5e33ab
@types/react: ^18.3.3 => 18.3.3
react: ^18.3.1 => 18.3.1
react-dom: ^18.3.1 => 18.3.1
typescript: ^5.5.4 => 5.5.4
Search keywords: IconButton, disabled, Link, react-router-dom, enabled
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Assessment
This issue has not been assessed yet.