Bug: onBlur is not firing in IOS Chrome when trigger done button

[youryu0212]

Bug: onBlur is not firing in IOS Chrome when trigger done button

[sweetliquid]

It look like React listening focusout instead of blur event, because blur event doesn't bubble up to the container. However, the focusout isn't triggered when the Done button is clicked in Chrome for iOS.

react/packages/react-dom-bindings/src/events/plugins/SimpleEventPlugin.js

Lines 85 to 96 in 0ae2b13

	case 'focusin':
	reactEventType = 'focus';
	SyntheticEventCtor = SyntheticFocusEvent;
	break;
	case 'focusout':
	reactEventType = 'blur';
	SyntheticEventCtor = SyntheticFocusEvent;
	break;
	case 'beforeblur':
	case 'afterblur':
	SyntheticEventCtor = SyntheticFocusEvent;
	break;

May same issue in Flutter:

• flutter/flutter#86682

Related Chrome issue:

• https://support.google.com/chrome/thread/170808931?hl=en&sjid=6941042876217237643-AP

[youryu0212]

Thank you for your kind response.
I think using the focusout event for onBlur's internal implementation is a matter of choice. The React team's
But I think it's unexpected behavior that it doesn't trigger when actual DOM blur occurs.

I understand that in the ios chrome environment, the DOM blur event is triggered, but the focusout is not, and that's probably an issue that either ios or chrome intended or should address.
However, I think if the DOM blur event were still triggered, the onBlur handler should still be fired.

Please feel free to share your opinions

[sweetliquid]

Since React listens to the actual DOM events on the container and distributes them internally, and the blur event don't bubble up and can't be listened by React, focusout is used instead. It may be a lot of trouble to solve this problem without changing the way the React event system works.