基础知识 :
focus, tabindex
div by default 是不可以被 focus 的.
button by default 就可以被 focus
要想 focus div, 我们可以写 tabindex = -1
这个表示可以 focus 但是不可以 tab
如果要可以 tab 那么是 tabindex = 0
tabindex 的号码可以用来表示 focusable 和 tabable
还有顺序功能. 游览器会从 1 开始 tab to next 然后越来越大, 数字重复就用 parent -> child -> sibling 的顺序 (所以对于一个区块只要分配一个值就可以了) . 最后才去 tabindex 0.
所以修改后的顺序就是
1,1,2,2,2,2,3,4,5,0,0,0.... 这种
button vs div, keyup enter
当 button focus 的时候如果 enter 那么会触发 click 事件.
当 div focus + enter 时, 啥也不会触发. 需要自己写监听 enter event 模拟一下. (这里要留意哦, 如果这个 div 里有 input, 那么是会冒泡上来的)
onblur to body
当一个被 focus 的 element 被删除后, 游览器会把 focus 移去 body. 不是parent 也不是 next 哦。
cdk focus monitor
ng 是用监听 focus 和 blur capture 来实现的, 不是 bubble 哦
然后触发时是在 outside angular zone 处理的事件监听.
所以经常会一种 bug 就是当一个 detech change cycle 开始后, 我们修改 state, dom 渲染时移除 dom
刚巧 dom 是被 focus 着的, 游览器就移动去 body 同时 blur 事件触发.
monitor 马上响应 (如果没有 outside zone，事件会排队然后触发下一次的 cycle)
马上响应，如果我们在监听里去修改 state, 那么就会导致一个 detech change cycle 进入渲染阶段后又修改 state, 然后就会报错了.
解决方法就是监听处理前先 delay 一下. Promise.resolve().then...
Overlay 经常破坏 focus monitor
overlay 会把内容丢去 body 如果我们 focus 里面的内容，很自然就去到外面了，monitor 会发现 blur 了。
但我们通常不希望这样. 解决方法就是自己做记入判断
比如当打开 overlay 后做一个 overlayOpened = true, 判断的时候就 blur = origin === null && !overlayOpened
这样才行.