Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

特殊弹窗键盘操作优化 #216

Closed
Justineo opened this issue Jan 15, 2018 · 4 comments
Closed

特殊弹窗键盘操作优化 #216

Justineo opened this issue Jan 15, 2018 · 4 comments

Comments

@Justineo
Copy link
Member

可以考虑参考浏览器默认行为:

类型 默认聚焦 按下 enter 行为 按下 esc 行为
alert 确定 确定并关闭 无效
confirm 取消 视 focus 而定 取消
prompt 输入框 在输入框中为提交,否则视 focus 而定 取消
@Justineo
Copy link
Member Author

Justineo commented Jan 29, 2018

补充一下,还需要考虑全局焦点自动切换的功能。关闭上层浮层,焦点应当自动切换触发上层浮层的交互元素上。举例:

点击 Button
→ 弹出 Dialog
  点击 DatePicker 按钮
  → 弹出 Calendar 浮层
    点击日期
  ← 收起 Calendar 浮层
  聚焦 DatePicker 按钮
  点击 Dialog 关闭按钮
← 收起 Dialog
聚焦 Button

即每个浮层应当记录之前触发自己弹出的元素,在关闭时,将焦点「还给」该元素。

@Justineo
Copy link
Member Author

Justineo commented Feb 2, 2018

考虑几点:

  • 不产生交互的浮层应该是在整个过程中透明的(比如加载遮罩、Toast 等),可能需要给 Overlay 增加 prop;
  • 获取触发元素初步思路是,Overlay 创建时/显示时的 document.activeElement
  • OverlayManager 创建节点时接受 source 参数;
  • OverlayManager 维护一个历史记录栈,每次 pop 时对栈顶元素的 source 执行 focus()

@Justineo
Copy link
Member Author

Justineo commented Feb 2, 2018

@Justineo
Copy link
Member Author

Justineo commented Feb 8, 2018

Implemented in #227.

@Justineo Justineo closed this as completed Feb 8, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

1 participant