search

mui / material-ui

Material UI: Comprehensive React component library that implements Google's Material Design. Free forever.
https://mui.com/material-ui/
MIT License
94.02k stars 32.3k forks source link

[material-ui][Dialog] Tabindex usage #40182

Open Muhamedkaric opened 11 months ago

Muhamedkaric commented 11 months ago

Duplicates

Latest version

Steps to reproduce 🕹

image image You are not using dialog as html element but you probably broke something here... With tabindex I'm not allowed to something like selecting text in tooltip. If I delete tabIndex in devtool I can select text from tooltip.

Current behavior 😯

No response

Expected behavior 🤔

No response

Context 🔦

No response

Your environment 🌎

npx @mui/envinfo ``` Don't forget to mention which browser you used. Output from `npx @mui/envinfo` goes here. ```
mnajdova commented 11 months ago

It doesn't look like this bug report has enough info for one of us to reproduce it. Please provide a CodeSandbox (https://material-ui.com/r/issue-template-latest), a link to a repository on GitHub, or provide a minimal code example that reproduces the problem. Here are some tips for providing a minimal example: https://stackoverflow.com/help/mcve

spider9375 commented 9 months ago

I also have issues with this exact tabindex. I am opening a WalletConnect web3Modal inside Dialog and with this tabIndex i am unable to enter value in an input field. If i remove this tabIndex it works.

Setting TransitionProps or PaperProps tabIndex: -1 reverts it with the error in console. Is there a way to override the warning and set tab index to null?

qinhua commented 2 months ago

Just remove tabindex="-1" manually or move your component from MUI Dialog container to solve this issue.

  useEffect(() => {
    // Damn it: remove tabindex from dialog container to prevent focus trap
    setTimeout(() => {
      const el = document.querySelector('.MuiDialog-container') as HTMLElement
      if (!el) return

      el.removeAttribute('tabindex')
    }, 500)
  }, [])