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

b09cbbtk 于 2022-10-29 发布在其他

关注(0)|答案(3)|浏览(217)

最新版本中存在此问题。
我已经搜索了此存储库的issues，并认为这不是重复的。

当前行为😯

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

预期行为🤔

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

重现步骤🕹

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

上下文🔦

您的环境🌎

'npx @mui/环境信息'

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

material-ui

来源：https://github.com/mui/material-ui/issues/28395

3条答案

按热度按时间

bzzcjhmw1#

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

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

 const AutocompleteLoading = styled('div', {

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

赞(0）回复(0）举报 2022-10-29

s1ag04yj2#

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

赞(0）回复(0）举报 2022-10-29

kpbwa7wx3#

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

赞(0）回复(0）举报 2022-10-29