Open adammartiska opened 1 year ago
@adammartiska Could you make a repro in CodeSandbox? You can fork this template: https://mui.com/r/issue-template-latest
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
Here is short video of the current behaviour
https://github.com/mui/material-ui/assets/55830313/5c9ae35e-d783-44e7-b974-c49f2050489f
Bump
@adammartiska Sorry for not getting back to this sooner, could you at least provide a reproduction in a repo I could try? 😅
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",
Duplicates
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)
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 🌎
``` Don't forget to mention which browser you used. Output from `npx @mui/envinfo` goes here. ```npx @mui/envinfo