`autoFocus` not working when `Textfield` is mounted by clicking on the `MenuItem` within `Menu`

Open
#35,996 2 comments 4 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
3/5
Estimated time
1-2 days
Newbie friendliness
35/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Stale
Tech stack
react, typescript
Domain
frontend

Research direction

Reproduce the behavior in the linked CodeSandbox, starting with demo.tsx and the Menu, MenuItem, Toggle, and Textfield interaction. Compare autofocus when the Textfield is toggled directly versus mounted from the Menu. Done means the Textfield receives focus in both cases, with the behavior verified against the provided reproduction.

Written by the indexing model from the issue text.

Description

has workaround scope: text field
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 https://codesandbox.io/s/magical-fog-y0e1m1?file=/demo.tsx
  2. Click on the Toggle Button
  3. The autoFocus is working as expected.
  4. Click on the Toggle Button again to hide the Textfield
  5. Click on Open Menu Button
  6. Click on the Toggle within the Menu
  7. The autoFocus is not working
Current behavior 😯

It is not autoFocus the Textfield.

Expected behavior 🤔

It is autoFocus the Textfield.

Context 🔦

I have a form that will open after clicking on the option in the Menu. I want it to autoFocus the Textfield when the form is open.

Your environment 🌎
npx @mui/envinfo 
 I am using Edge.
  System:
    OS: Windows 10 10.0.22621
  Binaries:
    Node: 18.12.1 - C:\Program Files\nodejs\node.EXE
    Yarn: Not Found
    npm: 8.19.2 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: Not Found
    Edge: Spartan (44.22621.1194.0), Chromium (109.0.1518.70)
  npmPackages:
    @emotion/react: ^11.10.5 => 11.10.5
    @emotion/styled: ^11.10.5 => 11.10.5
    @mui/base: 5.0.0-alpha.113 => 5.0.0-alpha.113
    @mui/core-downloads-tracker:  5.11.4
    @mui/icons-material: ^5.11.0 => 5.11.0
    @mui/material: ^5.11.4 => 5.11.4
    @mui/private-theming:  5.11.2
    @mui/styled-engine:  5.11.0
    @mui/system: ^5.11.4 => 5.11.4
    @mui/types:  7.2.3
    @mui/utils:  5.11.2
    @mui/x-data-grid:  5.17.19
    @mui/x-data-grid-premium: ^5.17.19 => 5.17.19
    @mui/x-data-grid-pro:  5.17.19
    @mui/x-date-pickers:  5.0.14
    @mui/x-date-pickers-pro: 5.0.14 => 5.0.14
    @mui/x-license-pro:  5.17.12
    @types/react: ^18.0.26 => 18.0.26
    react: ^18.2.0 => 18.2.0
    react-dom: ^18.2.0 => 18.2.0
    typescript: ^4.9.4 => 4.9.4
Dominant language
JavaScript
Stars
99.1k
Forks
32.5k
Avg merge
2d 17h
Merged PRs (30d)
106

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.

More from mui/material-ui

All issues in mui/material-ui

Similar issues

More JavaScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.