[joy-ui][Modal] `ModalClose` applies hover and click only outside the button's icon
Open
Nobody has claimed this yet.
on hold
package: joy-ui
scope: modal
- Dominant language
- JavaScript
- Stars
- 99.1k
- Forks
- 32.5k
- Avg merge
- 2d 17h
- Merged PRs (30d)
- 106
Description
Steps to reproduce
Steps:
import { DialogActions, DialogContent, Modal, ModalClose, ModalDialog, Typography, } from '@mui/joy';- Hover or Click the X of ModalClose.
https://github.com/mui/material-ui/assets/43346005/52686181-0327-47ee-ba66-44382a291274
Current behavior
The <ModalClose /> works when you hover or click outside it's default svg child.
Expected behavior
It should hover or click when you focus the button or the svg inside button.
Context
mui/joy default ModalClose
Your environment
npx @mui/envinfo
System:
OS: Windows 10 10.0.19045
Binaries:
Node: 18.18.0 - C:\Program Files\nodejs\node.EXE
npm: 10.2.0 - C:\Program Files\nodejs\npm.CMD
pnpm: Not Found
Browsers:
Chrome: Not Found
Edge: Chromium (122.0.2365.52)
npmPackages:
@emotion/react: ^11.11.1 => 11.11.1
@emotion/styled: ^11.11.0 => 11.11.0
@mui/base: 5.0.0-beta.10
@mui/core-downloads-tracker: 5.14.4
@mui/envinfo: ^2.0.18 => 2.0.18
@mui/icons-material: ^5.14.3 => 5.14.3
@mui/joy: 5.0.0-beta.29 => 5.0.0-beta.29
@mui/lab: ^5.0.0-alpha.139 => 5.0.0-alpha.139
@mui/material: ^5.14.4 => 5.14.4
@mui/private-theming: 5.14.4
@mui/styled-engine: 5.13.2
@mui/styles: ^5.14.4 => 5.14.4
@mui/system: 5.14.4
@mui/types: 7.2.4
@mui/utils: 5.14.4
@mui/x-date-pickers: ^6.11.0 => 6.11.0
@types/react: ^17.0.0 => 17.0.64
react: ^18.2.0 => 18.2.0
react-dom: ^18.2.0 => 18.2.0
styled-components: ^5.1.1 => 5.3.11
typescript: ^5.1.6 => 5.1.6
Search keywords: modal
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.
Research direction
Start from the Joy UI ModalClose component used in the reproduction with Modal, ModalDialog, DialogActions, and DialogContent. Reproduce the hover and click behavior on the default X SVG, then inspect the ModalClose implementation and its existing tests. Done means the button and its SVG respond consistently to hover and click.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100