React: Dispatch blur event on siblings

[max-cross]

There are two elements on the same level and they are both have onBlur handler. When one element loses focus, in his callback I try to dispatch blur event for the second element and I have "Maximum call stack size exceeded" error in console.

Try example in JSFiddle. Click on second element and press "tab" button to lose focus.

Example link: https://jsfiddle.net/0Lhqrjbq/2/

Version: 15.5.4

[jquense]

Sorry fat fingers on the button, didn't mean to close :|

[Fasani]

Hey,

This is because you have an event that happens onBlur that makes an event 'Blur' which happens on the same input. So every time you blur, you blur again and that blurs and again and so on until the browser crashes.

You could dispatch the event from window.blur instead of input.blur which fires just once.

[max-cross]

You might didn't noticed that in one case "input" it's just variable but not an input element. I've update link with renamed variable

[Fasani]

So React uses SyntheticEvents which wrap native ones. Maybe calling the native event is causing issues with that. https://facebook.github.io/react/docs/events.html

I did a small test where I included the ReactTestUtils lib which people use for testing and making fake events. https://unpkg.com/[email protected]/dist/react-with-addons.js

You can add the above code to the fiddle then add the 'react-dom' script again and it works if you replace the event trigger with this:
React.addons.TestUtils.Simulate.blur( myElement );

Not sure if that really helps you but maybe you find some more ideas there.

[jquense]

So my guess is that it's because the custom event isn't set up completely, e.g. there is no event target. React can't tell what component to trigger it for. I would do this instead if you want the right behavior in your onBlur, myElement.blur() rather then trying to recreate a valid blur event.

[max-cross]

If I call input.blur(), it will not invoke onBlur callback on this input. So, it doesn't work :(

[gaearon]

I don't see Maximum call stack size exceeded anymore with React 16.

Seems like it works.

https://jsfiddle.net/tfnvojba/