Form onFocus/onBlur not firing

[web2wire]

I am migrating some forms over from react. These include onFocus and onBlur handlers on the form tags to prevent background updates of the form (from ajax) if the form is being edited. While these events fire in React they do not appear to do so in Preact.

Here is the working React example, https://codepen.io/web2wire/pen/rGVmWm, and here is a non-working Preact one, https://codepen.io/web2wire/pen/BwNRZB.

Is there anything else I should be doing to get these handlers working? I am using preact-compat in my application.

[pl12133]

Hello @web2wire thanks for the issue. It is odd that React fires focus and blurs events in a parent element when a child element is focused, because those event should not bubble [1]. I have forked your codepen and demonstrated that with vanilla JS, the behavior matches preact: https://codepen.io/anon/pen/aLOjoa.

As a workaround, you can listen for the focusin [2] and focusout [3] events instead of focus and blur, respectively. These events do bubble, and will trigger on the form element when a child input element receives focus.

EDIT: Here is a fork of your preact version of the codepen, where I believe the issue is resolved: https://codepen.io/anon/pen/JrdBXx

[web2wire]

Thanks for the speedy reply @pl12133. Your suggestion works fine so will close this issue. I found a discussion about this among the React devs (facebook/react#6410) though no-one really seems to know why it was done this way in the first place.

[nemanjacosovic]

Just to add to the topic. I have the exact same issue.

[christianjuth]

Is there a reason Preact chose to match vanilla JavaScript behavior and not React? This seems like it could cause compatibility changes when using React libraries with Preact. For example, switching to Preact breaks @szhsin/react-menu which I'm pretty sure is because that library uses onBlur instead of focusout. At the very least, I think Preact should put a disclaimer next to the "alternative to React with the same modern API".

[developit]

The more likely conclusion here would be to have preact/compat internally swap onFocus/onBlur to onfocusin/onfocusout. We do it for onChange already.