shadcn-ui/ui 项目中 Drawer 组件在 iOS 设备上的输入框聚焦问题解析

在移动端开发中，Drawer（抽屉）组件是一种常见的交互模式，它通常从屏幕边缘滑出，展示额外内容。然而，在 shadcn-ui/ui 项目中，开发者报告了一个特定于 iOS 设备的奇怪现象：当 Drawer 内的输入框获得焦点时，整个 Drawer 会突然扩展到占据整个设备高度。

问题现象分析

这个问题的触发条件非常具体：

1. 使用了带有 disablePreventScroll 属性的 Drawer 组件
2. Drawer 内部包含输入框元素
3. 在 iOS 设备上（特别是带有底部 URL 栏的 Safari 浏览器）
4. 只有当输入框获得焦点时才会出现

当用户首次点击输入框时，Drawer 会异常扩展。有趣的是，如果关闭后重新打开 Drawer，问题不会再现，说明这是一个与初始状态相关的渲染问题。

技术背景

这种现象与 iOS Safari 的几个特性密切相关：

1. 视口调整机制：iOS Safari 在输入框获得焦点时会自动调整视口，以腾出空间显示虚拟键盘
2. 动态工具栏：底部 URL 栏的显示/隐藏会影响可用视口高度
3. 滚动阻止策略：disablePreventScroll 属性改变了默认的滚动行为控制

解决方案

经过深入研究，发现这个问题源于底层依赖库 vaul 的输入框重定位逻辑。解决方案是：

<Drawer disablePreventScroll repositionInputs={false}>
  {/* 内容 */}
</Drawer>

关键点在于设置 repositionInputs={false} 属性，这会禁用 vaul 库对输入框的自动重定位行为。

深入理解

repositionInputs 属性的作用机制：

1. 默认行为（true）：vaul 会尝试自动调整输入框位置，确保其在虚拟键盘上方可见
2. 禁用后（false）：组件将保持原始布局，由浏览器原生处理输入框定位

在 iOS 环境下，这种自动重定位与 Safari 的视口调整产生了冲突，导致了高度计算异常。禁用此功能后，交由系统原生处理反而能获得更稳定的表现。

最佳实践建议

对于需要在 Drawer 中使用表单的场景，推荐：

1. 明确设置 repositionInputs={false}
2. 考虑使用 position: fixed 布局避免布局跳动
3. 对于复杂表单，可以增加适当的顶部内边距，为虚拟键盘留出空间
4. 在 iOS 设备上进行充分测试，特别是不同 Safari 版本

总结

这个案例展示了移动端 Web 开发中常见的"浏览器特性"挑战。通过理解底层机制和合理配置组件属性，开发者可以避免这类布局异常问题。shadcn-ui/ui 项目通过 vaul 库提供了灵活的 Drawer 实现，但需要开发者根据目标平台进行适当的属性调优。