React Mantine下拉菜单自动滚动聚焦：如何阻止该行为？

当使用Mantine的Dropdown组件时，若菜单高度超过屏幕视口，组件默认会自动滚动页面并聚焦菜单区域，你可以通过配置组件属性直接禁用这两个行为：

• 给Dropdown的menuProps传入autofocus: false，关闭菜单打开时的自动聚焦逻辑，避免浏览器因聚焦元素触发滚动。
• 同时设置scrollToSection: false，阻止组件自动滚动页面到菜单所在位置。

示例代码如下：

import { Dropdown } from '@mantine/core';

export default function App() {
  return (
    <div style={{ padding: '200px 0', height: '150vh' }}>
      <Dropdown
        trigger="click"
        label="展开菜单"
        menuProps={{
          autofocus: false,
          scrollToSection: false
        }}
      >
        {/* 大量菜单项模拟高度超出视口的情况 */}
        {Array.from({ length: 20 }).map((_, idx) => (
          <Dropdown.Item key={idx}>菜单项 {idx + 1}</Dropdown.Item>
        ))}
      </Dropdown>
    </div>
  );
}

这两个属性直接作用于Dropdown底层的Menu组件，从根源上关闭了自动滚动和聚焦的默认行为，不需要额外的自定义滚动或事件拦截逻辑。

内容的提问来源于stack exchange，提问作者HackerMF