What is the purpose of settimeout of 10ms in updateForFocusChange?

v6
1

I have a component which adds some predefined text on clicking some buttons into the last focused element.

My last focused element can for example be the codemirror editor, or it can be a regular input.

The way I know which one is the last focused is by the focus event. And a blur event tells me that the last focused is null (component won’t do anything).

When I select FieldA (codemirror editor) all is good. But then when I select FieldB (the regular input), my “last focused” is not FieldB, but instead it is null. This happens because codemirror’s blur happens after a 10ms timeout, making it the last event, occurring after the focus onto FieldB. last focused goes: FieldA → FieldB → null

I don’t think I have a good solution to this (I don’t want to add a 10ms timeout to all my other fields…) so I’m curious on why this timeout exists in the first place. Also if you have any suggestions to my problem, that’s also welcome haha!

1 Like
2

There are several types of interactions that will cause the editor to lose and then immediately regain focus (people implementing buttons that steal focus on mousedown but then immediately move it back to the editor, our own kludge for dealing with Android inappropriately closing the virtual keyboard in some situations). This timeout tries to isolate code tracking focus state from that kind of phantom focus changes.

If you want to directly track DOM focus state, I’d recommend using a DOM event observer rather than an update listener. Those get the raw DOM events.

2 Likes