Angular 学习笔记 (cdk focus monitor 和一些 focus tabindex 的基础)

更新 : 2019-12-22

focusInitialElementWhenReady 

我们经常会调用到这个方法, 它的逻辑是这样

先看有没有 cdkFocusInitial 有的就 focus (不管它是不是 tabbable, 比如 disabled 就不是 tabbable)

如果你没写这个，那么它就去找 cdkFocusRegionStart 

然后 focus, 同样不管是不是 tabbable

依然找不到那么它就去整个 focus trap element 里面找 第一个 tabbable 的 element 来 focus (注意这里是 tabbable 哦, disabled 会 skip 掉)

 

虽然看上去很厉害但是还是很多场景是不支持的。

比如有一个 dialog, 开头是一个 close button 然后第一个 input 某些时候是 disabled 的. 

这种情况下就不行了. 

因为我们的意图是, 不管 close button + focus 第一个 tabbable input 

目前用烂招, disabled close button for 1 second 让 focus 完成后再 enable 回来

 

 

 

基础知识 :

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

这样才行.