onFocusIn/onFocusOut events

[sophiebits]

Like mouse enter/leave, these are almost always what you want, not the onFocus and onBlur events we currently expose. I run into this semi-frequently when actually doing product work. We should add them.

[jimfb]

FWIW, I agree with you. People know about focusin/focusout, and so we should just make them work, despite the fact that they would map to the exact same event handler we use for focus/blur.

However, last time this was discussed, we opted to not do this (#6226) and decided to warn instead (https://github.com/facebook/react/pull/6296/files).

I'd be fine with reversing this decision if you can get the momentum within the team.

[sophiebits]

It looks like it was decided against because of an incorrect claim that they're indistinguishable from onFocus/onBlur. onFocusIn/onFocusOut is different in that when moving focus between two children of an element, neither event fires on the container.

[sophiebits]

Doing it properly means adapting the logic in EnterLeaveEventPlugin and isn't as simple as adding it to SimpleEventPlugin.

[gaearon]

Ah, that makes sense. Thanks for explaining!

Adding “good first bug” here. Note @spicyj’s comments: they need to behave like onMouseEnter and onMouseLeave. You’ll want to look at EnterLeaveEventPlugin.

[cbrwizard]

I'd like to work on it if nobody minds. Enough with the tests, time to add real source code!

[cbrwizard]

Hey @gaearon @spicyj apparently there is a confusion here, let me explain.
mouseover and mouseout bubble up. mouseenter and mouseleave don't bubble up. Corresponding React event handlers work the same as native events - awesome.

Native focus and native blur events don't bubble. Corresponding React event handlers onFocus and onBlur do bubble - dun dun dun.

Native focusin and native focusout events do bubble. React events for these should be implemented and bubble too.

Here is a jsfiddle I made to display this. Checked in Chrome only, as since MDN documentation states that this is intended behavior then I believe it should be the same in other browsers.

If I am right about this (please correct me if I am wrong), then the following should be done:
0. Warnings about onFocusIn/onFocusOut should be removed (obviously).

1. Currect React onFocus should be renamed to onFocusIn; onBlur - to onFocusOut as they currently work the same as native onFocusIn and onFocusOut work - they bubble.
2. onFocus and onBlur event listeners should be implemented in React - which will not bubble.

[sophiebits]

Hmm, that sounds plausible. Thanks for the correction. Kinda annoying that we'll end up renaming these for people but maybe it's for the best.

[cbrwizard]

Hey, unfortunately, I cannot invest time in this right now and I must pause. I have added onFocusIn/Out by mimicing onFocus/onBlur but I am having issues with changing onFocus/onBlur so they don't bubble.
I don't want to slow down the awesomeness of React so if anyone wants to invest into this issue - please do. If nobody does - I will get back to it when I have more time. Good luck!

[jimfb]

but I am having issues with changing onFocus/onBlur so they don't bubble.

Do we want them to not bubble? We had previously said that all events bubble. I'm fine with whatever, so I'll leave that decision to @spicyj since he has the most situational awareness here.

[mrscobbler]

Since this is tagged as a good first bug I thought I'd take a stab at this. Let me know if you're still working on it @cbrwizard !

[mrscobbler]

I did a little more investigating and it looks like focusin and focusout events are not supported by Firefox. Is this still something you want to implement if all browsers don't support it? See here: https://developer.mozilla.org/en-US/docs/Web/Events/focusin and here: https://bugzilla.mozilla.org/show_bug.cgi?id=687787

[jimfb]

@mrscobbler It should be possible to polyfill the event on any browsers that don't natively support it. We do this with several events that are not supported on particular browsers.

[mrscobbler]

Ok! Good to know.