Mantine框架中iOS设备文本选择问题的分析与解决方案

问题背景

在使用Mantine框架的Drawer和Modal组件时，iOS设备用户可能会遇到一个特殊问题：虽然可以选中文本，但无法移动文本选择手柄。这个问题在桌面浏览器和Android设备上不会出现，仅在iOS Safari浏览器中存在。

技术原理分析

Mantine的Drawer和Modal组件底层都基于ModalBase组件实现，而ModalBase默认会使用RemoveScroll组件来包裹对话框内容。RemoveScroll组件的主要功能包括：

1. 通过隐藏滚动条来锁定页面滚动
2. 拦截所有滚动、滚轮和触摸移动事件，防止用户在对话框外滚动

在桌面和Android设备上，preventDefault方法对触摸移动事件的拦截不会影响文本选择手柄的操作。但在iOS Safari浏览器中，这种拦截会直接导致文本选择手柄无法被拖动。

解决方案

Mantine团队确认这是预期的默认行为，但提供了两种解决方案：

全局配置方案

可以通过主题配置全局修改Drawer和Modal的默认属性：

export const theme = createTheme({
  components: {
    Drawer: {
      defaultProps: {
        lockScroll: false,
      },
    },
    Modal: {
      defaultProps: {
        lockScroll: false,
      },
    },
  },
})

单个组件配置方案

如果只需要在特定组件上解决此问题，可以使用removeScrollProps属性来修改RemoveScroll组件的行为：

<Modal removeScrollProps={{ enabled: false }} />

注意事项

1. 禁用滚动锁定后，用户可能会在对话框外滚动，需要评估是否会影响用户体验
2. 此问题仅影响iOS设备，其他平台不受影响
3. 如果应用主要面向移动端用户，建议进行全面测试

最佳实践建议

对于以内容操作为主的应用（如文档编辑器），建议：

1. 在内容编辑区域禁用滚动锁定
2. 添加自定义滚动边界处理
3. 在非编辑区域保持默认的滚动锁定行为

对于以浏览为主的应用，可以保持默认设置，确保更好的用户体验一致性。

通过理解底层机制和合理配置，开发者可以在保持Mantine组件优势的同时，解决特定平台下的交互问题。