Mantine Popup组件中closeOnEscape的行为变更解析

问题背景

在Mantine UI库的7.13.4版本中，Popup组件（包括Popover等派生组件）的closeOnEscape行为发生了重要变更。这个变更影响了开发者对Popup关闭逻辑的控制方式，特别是当用户按下ESC键时触发关闭的场景。

行为变更详情

在7.13.3及更早版本中，当Popup设置为受控组件（controlled component）且启用closeOnEscape时，按下ESC键会直接调用开发者提供的onClose回调函数。这使得开发者可以在这个回调中处理状态更新逻辑。

然而从7.13.4版本开始，这一行为发生了改变：

• onClose现在仅在Popup实际关闭时（即opened属性变为false时）被调用
• 按下ESC键等触发关闭的操作不再直接调用onClose
• 开发者需要使用onChange回调来响应关闭触发事件

代码示例对比

旧版本写法（7.13.3及之前）：

<Popover 
  opened={opened}
  onClose={() => setOpened(false)}
  closeOnEscape
>
  {/* 内容 */}
</Popover>

新版本正确写法（7.13.4及之后）：

<Popover
  opened={opened}
  onChange={(isOpen) => setOpened(isOpen)}
  closeOnEscape
>
  {/* 内容 */}
</Popover>

设计原理分析

这一变更主要是为了统一Popup组件的状态管理逻辑，使其行为更加一致和可预测。新的设计将"触发关闭的事件"和"实际关闭的回调"明确分离：

1. 触发关闭的事件（如ESC键、点击外部等）现在通过onChange回调通知
2. 实际关闭的回调（onClose）仅在Popup确实关闭时触发

这种分离使得状态管理更加清晰，也避免了在某些边缘情况下可能出现的重复调用问题。

与其他组件的区别

值得注意的是，这一变更目前仅影响Popup及其派生组件（如Popover、Dropdown等）。Mantine中的其他类似组件如Modal和Drawer仍保持原有行为，因为：

1. Modal/Drawer只能是受控组件
2. 它们只提供onClose回调，不提供onChange
3. 它们的关闭逻辑处理方式不同

迁移建议

对于需要从旧版本迁移的开发者，建议：

1. 检查所有使用Popup/Popover等组件的地方
2. 将依赖ESC键关闭逻辑的onClose回调改为使用onChange
3. 注意onClose现在只应在需要知道Popup确实关闭时使用

对于更复杂的关闭逻辑（如同时需要点击外部关闭），可以考虑结合useClickOutside钩子，但要注意其引用处理方式（需要使用useState而非useRef来处理多个节点）。

总结

Mantine 7.13.4对Popup组件关闭行为的变更是为了提供更一致和可靠的状态管理机制。虽然这带来了短期内的迁移成本，但从长期来看，这种明确分离关注点的设计将使组件行为更加可预测，也减少了潜在的错误场景。开发者应理解这一设计变更背后的理念，合理调整自己的状态管理逻辑。