Basics:
focus, tabindex
div by default is not the focus of.
button by default can be focus
To focus div, we can write tabindex = -1
This representation can focus but can not tab
If you can tab so that tabindex = 0
tabindex numbers may be used to represent and focusable tabable
There sequential function tour will start at 1 tab to next and then more and more, digital repeat it with parent -> child -.> Sibling order (for so long as a block is assigned a value on it) and finally go tabindex 0.
So the order is modified
This 1,1,2,2,2,2,3,4,5,0,0,0 ....
button vs div, keyup enter
When the enter button focus time if it will trigger a click event.
When div focus + enter, what will not be triggered. Need to write your own monitor enter event simulation it. (Here we must pay attention Oh, this div if there are input, it will bubble up)
onblur to body
After being a focus of the element is deleted, the tour will focus filter to remove body. Oh, not a parent nor the next.
cdk focus monitor
ng is listening focus and blur capture to achieve, not a bubble oh
Then listen for the event outside angular zone processing is triggered.
So often seen as a bug is that when a detech change cycle began, we modify the state, removing dom dom when rendering
Dom happens to be the focus, the tour moves to the body is simultaneously blur event is triggered.
monitor immediately respond (if there is no outside zone, the event will then line up the cycle once triggered)
Immediately respond, if we modify the state go in listening, it will lead to a detech change cycle into the rendering phase and then modify the state, then the error will be.
The solution is treated before listening to delay it. Promise.resolve (). Then ...
Overlay often destroys focus monitor
overlay content will lose our focus to the body if the contents inside, it is natural to go to the outside, monitor will find a blur.
But we usually do not want that. The solution is to make their own judgment entered
For example when the open overlay make a overlayOpened = true, to determine when it && blur = origin === null! OverlayOpened
That will do.