How to correctly trigger on focus event for server rendered text field in React JS

Viewed 217

Sometimes text field component which is rendered from server, does not trigger attached onFocus event handler. Reason being, the text field component which is rendered on server side, is not hydrated on the client side yet and user tries to focus on the component before hand.

1 Answers

The text field component which is rendered from server, should check on client side once it is hydrated and mounted that if that text field is the active element in the document. If yes, we should trigger the onFocus event accordingly. DOM APIs can tell that if a perticular node is Active element or not.

Related