Determine whether React `onFocus` event was triggered by Mouse, Keyboard, Programmatic?

Question

Because React simply says that the event.type is focus I'm not sure what I can do to determine this.

I need to run some code only if the focus was not initiated by the mouse.

Thanks for any tips

Answer 1

I think, you should use duck typing, e.g. only MouseEvents have pageX, pageY properties, so

if (e.pageX || pageY) -> MouseEvent 

Keyboard Event have locale, location

if (e.locale || location) -> KeyboardEvent 

You can find all differences in official documentation: https://reactjs.org/docs/events.html#supported-events

Answer 2

Use some other event that only applies to the keyboard. Check this other post: Differentiate between focus event triggered by keyboard/mouse

For React you want to use onKeyDown or onKeyPress. You can check these events here: https://reactjs.org/docs/events.html#keyboard-events