模态框内Editable combobox with list autocomplete的Esc键处理最佳实践咨询

针对表单场景下的Esc键交互，核心原则是从当前聚焦的最细粒度组件开始响应，逐步向上传递，具体的最佳实践和处理方案如下：

核心交互逻辑 #

• 当焦点在可编辑组合框内时，第一次按Esc的优先级是处理组合框自身的交互：如果自动补全列表处于展开状态，先关闭/清空列表，而不是直接关闭模态框。这符合用户“先终止当前局部操作”的直觉——用户正在和组合框交互，Esc的第一目的是结束这个小范围的操作，而非关闭整个模态框。
• 只有当组合框处于无交互状态时（比如补全列表已经关闭、或者从未展开过），按Esc才应该触发模态框的关闭逻辑。

具体实现方案 #

1. 跟踪组合框的状态：维护一个状态变量（比如isDropdownExpanded），用来标记自动补全列表是否展开。
2. 分情况处理Esc事件：
   • 若isDropdownExpanded为true：按下Esc时，先关闭补全列表、更新状态，阻止事件冒泡（此时用户意图是关闭列表，而非模态框）。
   • 若isDropdownExpanded为false：按下Esc时，不阻止事件冒泡，让事件传递到模态框的监听器，触发模态框关闭。
3. 细节优化：
   • 当焦点离开组合框时，自动关闭补全列表，确保状态同步，避免出现列表展开但焦点不在的情况。
   • 如果产品需求允许，可在组合框输入框有内容、且列表已关闭时，让第二次按Esc清空输入内容，再第三次按Esc关闭模态框——但这一步需结合实际业务场景判断，核心还是优先满足“局部操作优先”的逻辑。

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