material-ui 在非原生模式下,Popper内的Textfield选择组件锚点错误,

rekjcdws  于 10个月前  发布在  其他
关注(0)|答案(4)|浏览(118)

重复问题

  • 我已搜索现有的问题

最新版本

  • 我已测试了最新版本

重现步骤 🕹

链接到实时示例:
步骤:

  1. https://github.com/codedthemes/berry-free-react-admin-template
  2. 点击右上角的通知图标,并在原生模式下选择状态正常工作
  3. 现在应用下面的补丁
  1. diff --git a/rmk/berry-free-react-admin-template/src/layout/MainLayout/Header/NotificationSection/index.js b/rmk/berry-free-react-admin-template/src/layout/MainLayout/Header/NotificationSection/index.js
  2. index fcae30e429..d6a60d67ff 100644
  3. --- a/berry-free-react-admin-template/src/layout/MainLayout/Header/NotificationSection/index.js
  4. +++ b/berry-free-react-admin-template/src/layout/MainLayout/Header/NotificationSection/index.js
  5. @@ -17,6 +17,7 @@ import {
  6. Popper,
  7. Stack,
  8. TextField,
  9. + MenuItem,
  10. Typography,
  11. useMediaQuery
  12. } from '@mui/material';
  13. @@ -182,14 +183,11 @@ const NotificationSection = () => {
  14. fullWidth
  15. value={value}
  16. onChange={handleChange}
  17. - SelectProps={{
  18. - native: true
  19. - }}
  20. >
  21. {status.map((option) => (
  22. - <option key={option.value} value={option.value}>
  23. + <MenuItem key={option.value} value={option.value}>
  24. {option.label}
  25. - </option>
  26. + </MenuItem>
  27. ))}
  28. </TextField>
  29. </Box>
  1. 现在点击状态选择组件。覆盖层飞走了。

当前行为 😯

如果 SelectProps 没有使用 native: true ,覆盖层会飞走。

预期行为 🤔

  • 无响应*

上下文 🔦

  • 无响应*

您的环境 🌎

npx @mui/envinfo

  1. System:
  2. OS: macOS 10.15.7
  3. Binaries:
  4. Node: 16.15.1 - /usr/local/opt/node@16/bin/node
  5. Yarn: 1.22.17 - /usr/local/bin/yarn
  6. npm: 8.13.2 - /usr/local/bin/npm
  7. Browsers:
  8. Chrome: 110.0.5481.100
  9. Edge: Not Found
  10. Firefox: Not Found
  11. Safari: 13.1.3
  12. npmPackages:
  13. @emotion/react: ^11.8.1 => 11.10.0
  14. @emotion/styled: ^11.8.1 => 11.8.1
  15. @mui/base: 5.0.0-alpha.91
  16. @mui/icons-material: ^5.8.4 => 5.8.4
  17. @mui/lab: ^5.0.0-alpha.92 => 5.0.0-alpha.92
  18. @mui/material: ^5.9.2 => 5.9.2
  19. @mui/private-theming: 5.9.1
  20. @mui/styled-engine: 5.8.7
  21. @mui/system: 5.9.2
  22. @mui/types: 7.1.5
  23. @mui/utils: 5.9.1
  24. @mui/x-date-pickers: ^5.0.0-beta.3 => 5.0.0-beta.3
  25. @types/react: ^17.0.47 => 17.0.47
  26. react: ^18.2.0 => 18.2.0
  27. react-dom: ^18.2.0 => 18.2.0
  28. typescript: ^4.9.3 => 4.9.3 ```
  29. </details>
  30. Chrome 110.0.5481.100
mm5n2pyu

mm5n2pyu1#

感谢您报告此问题~您是否介意提供一个可以重现问题的最小示例?@wenq1
以下是提供最小示例的一些提示,以及您可以使用的CodeSandbox模板。

uajslkp6

uajslkp62#

当然。在这里,你可以在下面点击“打开popper”。第一个原生选择器可以正常工作。第二个(使用mui装饰的)它的覆盖物飞走了。

6fe3ivhb

6fe3ivhb3#

请进行初步评估。

yks3o0rb

yks3o0rb4#

你会进行分级处理吗?

相关问题