material-ui 自动完成列表与输入标签重叠

b09cbbtk  于 2022-10-29  发布在  其他
关注(0)|答案(3)|浏览(229)
  • 最新版本中存在此问题。
  • 我已经搜索了此存储库的issues,并认为这不是重复的。

当前行为😯

当我打开自动完成列表并且布局是这样的,它打开到顶部。列表与输入标签部分重叠。

预期行为🤔

预期的行为是,当自动完成打开时,标签不会隐藏。

重现步骤🕹

操作步骤:
1.转到官方文档页面https://mui.com/components/autocomplete/
1.滚动以使自动完成窗口打开到顶部
1.点击自动完成输入。

上下文🔦

您的环境🌎

'npx @mui/环境信息'

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

bzzcjhmw1#

我建议将margin-bottom: 8px添加到paper元素中,这样应该可以工作,并且不会影响其他情况。

  1. diff --git a/packages/mui-material/src/Autocomplete/Autocomplete.js b/packages/mui-material/src/Autocomplete/Autocomplete.js
  2. index 1fde5aee0e..c35dbfa2cf 100644
  3. --- a/packages/mui-material/src/Autocomplete/Autocomplete.js
  4. +++ b/packages/mui-material/src/Autocomplete/Autocomplete.js
  5. @@ -239,6 +239,7 @@ const AutocompletePaper = styled(Paper, {
  6. })(({ theme }) => ({
  7. ...theme.typography.body1,
  8. overflow: 'auto',
  9. + marginBottom: theme.spacing(1),
  10. }));
  11. const AutocompleteLoading = styled('div', {

不确定这是否应该被认为是一个错误。cc @mnajdova

展开查看全部
s1ag04yj

s1ag04yj2#

不确定这是否应该被认为是一个错误。cc @mnajdova
我认为这是一个bug,我觉得修改的建议很好。让我们测试一下修改后所有变体的所有场景都很好

kpbwa7wx

kpbwa7wx3#

如果使用的输入是填充变量或标准变量,会发生什么?有些人可能会认为这是OutlinedInput的错误,而不是Autocomplete:#13253(评论)。我不确定。实际上,也许弹出窗口应该使用窗口的空间,而不是视口的空间来改变它的位置:#21661,减少此错误的影响。

相关问题