material-ui [自动完成]在展开到顶部/底部之间跳转

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

当前行为😯

当输入字段底部下方没有太多空间时,自动完成功能会打开到顶部。
通过在输入字段中输入文本,“自动完成”字段会变短并跳到底部。

预期行为🤔

打开自动完成后,它应停留在相同的位置,因为切换到底部是不期望的,用户必须重新定位以找到建议列表。

重现步骤🕹

用于重现的CodeSandbox:https://codesandbox.io/s/naughty-hermann-24rmn
操作步骤:
1.输入字段

1.确保底部没有太多空间
1.点击进入字段后,自动完成打开到顶部(如预期的⇒️)

1.键入“a”后,自动完成跳转到底部(不预期,应停留)

您的环境🌎

| 技术人员|版本号|
| - -|- -|
| 材料-UI|版本4.11.0|
| React|版本16.13.1|
| 浏览器|铬83|

8zzbczxx

8zzbczxx1#

@foxylion有趣的是,我们是否需要放置弹出窗口来最大化可见性?当弹出窗口显示在顶部时,我觉得这是不对的。我觉得这种行为最适合工具提示。

bttbmeg0

bttbmeg02#

我看到有人明确要求翻转行为,所以弹出窗口总是可见的。在我看来,popperjs在决定是否翻转回来时太急切了。

7uhlpewt

7uhlpewt3#

我会说,下拉菜单应该是朝“足够空间”的方向打开的,但在打开时不应该改变位置,因为这会分散使用自动完成输入的注意力。

z2acfund

z2acfund4#

你有没有研究过我们如何实施它?

w1e3prcc

w1e3prcc5#

不,我不确定如何修复。但它看起来像是Popper.js特有的行为,只能通过覆盖onUpdate并防止更新位置来修复。但需要记住,在使用展开的自动完成功能滚动时,可能需要重新定位。

kh212irz

kh212irz6#

我也遇到了同样的问题。有人找到了解决办法吗?

yrwegjxp

yrwegjxp7#

我有同样的问题。有人请更新,如果有任何解决这个问题。

ldioqlga

ldioqlga8#

你好,任何人仍然试图解决的立场,只是添加popperComponent属性。Popper可以从mui导入

PopperComponent={({ style, ...props }) => (
    <Popper
      {...props}
      style={{ ...style, height: 0 }} // width is passed in 'style' prop
    />
  )}

相关问题