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

[youryu0212]

Version

• react: 18.2.0
• react-dom: 18.2.0
• test device version: Iphone X(IOS 16.3)

Sample Code

• https://github.com/youryu0212/react-blur-error

Expectation

• Clicking the DONE button on the IOS keyboard, I expected the blur to be triggered by losing focus on the html Input Element.

Result

• The onBlur event is not fired.

Detailed description:

• After the done button on the keypad was clicked, the html was blurred but react's onBlur was not fired
• If you apply blur as a native event instead of react onBlur, it works fine.
• IOS, Android Other Browsers onBlur was fine.

https://github.com/youryu0212/react-blur-sample/assets/87521172/517787aa-4856-4eb4-a416-eb0c8db3a62d
https://github.com/youryu0212/react-blur-sample/assets/87521172/71ff622b-e982-4bcc-98c3-fd25b17aef3e

The current behavior

• Clicking the DONE button on the IOS keyboard, The onBlur event is not fired.

The expected behavior

• Clicking the DONE button on the IOS keyboard, The onBlur event is fired.

[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:

• [web] Detecting the click on "done" in the virtual keyboard in iOS 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.