Input elements in MUI modal are blurred after first focus

[adammartiska]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Steps to reproduce 🕹

I am using material UI component and I am facing this issue: When I open modal and try to focus any input element in modal (for example or the first focus is blurred immediately. The second focus and so on are behaving correctly (the focus is persisted). I tried using Modal props disableAutoFocus, disableRestoreFocus, disableEnforceFocus but none of this works

This is my minimal example code: (when I open the modal and focus the Textfield for the first time, the focus is immediately blurred)

 <Modal
        open={!!editTemplateId}
        onClose={() => setEditTemplateId(undefined)}
      >
        <Box
          sx={{
            width: '600px',
            ...modalStyles,
          }}
        >
          <TextField
            variant="filled"
            label={t('edit-modal.subject')}
            sx={{ width: '100%', mb: 2 }}
            value={ts}
            onChange={(e) => st(e.target.value)}
          />
        </Box>
      </Modal>

Current behavior 😯

Input elements in the component are blurred for the first time they are focused

Expected behavior 🤔

Focus on input element should persist

Context 🔦

No response

Your environment 🌎

npx @mui/envinfo

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

[mj12albert]

@adammartiska Could you make a repro in CodeSandbox? You can fork this template: https://mui.com/r/issue-template-latest

[adammartiska]

Hello, I don't know why but I am running same example in my app as it is here in code-sandbox (only the hierarchy of the components is slightly different - Modal is outsourced in separate component), but in my app it still blurs after first focus, in the code-sandbox this problem is not reproducible ( I also matched MUI versions in dependencies - I am using 5.6.1) Here is the sandbox - https://codesandbox.io/s/gifted-star-3dcyjk?file=/src/App.tsx

[adammartiska]

Here is short video of the current behaviour

https://github.com/mui/material-ui/assets/55830313/5c9ae35e-d783-44e7-b974-c49f2050489f

[adammartiska]

Bump

[mj12albert]

@adammartiska Sorry for not getting back to this sooner, could you at least provide a reproduction in a repo I could try? 😅

[cameronthrntn]

We're also experiencing this issue, though we've found it behaving differently in different environments, 2 people on the same browser, same version, same code - one gets the bug and one doesn't. Which would mirror the behaviour experienced in this sandbox post. If we stumble onto a solution we'll post it here

EDIT: To add further confusion to this, we're using a Dialog component rather than Modal, and ours actually focusses fine on initial click, but when we update state in the Dialog (a checkbox being selected), the input breaks as shown above

EDIT 2: For better or worse, updating our packages seemed to ✨ solve all of our problems ✨. We've migrated from:

    "@emotion/react": "^11.10.5",
    "@emotion/styled": "^11.10.5",
    "@mui/material": "^5.10.14",
    "@mui/x-data-grid": "^5.17.11",

To:

    "@emotion/react": "^11.11.1",
    "@emotion/styled": "^11.11.0",
    "@mui/material": "^5.14.13",
    "@mui/x-data-grid": "^6.16.2",