DOM event props capitalization: onFocusIn v. onFocusin v. onfocusin

[maranomynet]

I was trying to bind a focusin event handler to an element, and found out that the only way to do it was to use an all-lower case prop onfocusin.

Neither onFocusin nor onFocusIn work.

I'm not sure if this is a Preact 10 beta related issue, or simply a documentation issue.

Are, perhaps, camelCased event prop-names strictly a React-compatibility feature, and all-lower case event props encouraged by Preact?

If so, that fact should be clearly mentioned under What's missing? or What's Different? in the Preact Guide.

(Using preact@10.0.0-beta.1 – Firefox, Chrome)

[cristianbote]

Hey @maranomynet, indeed, onfocusin/out is not supported[1]. Also, looking over in react it seems as well that it's not supported facebook/react#6410.

As an alternative perhaps you could rely on focus/blur events?

[1] The supported part is actually driven by the fact that the event exists on the Global Event Interface and they do not. Just try it in your console 'onfocusin' in window. As a side note MDN gives a 404 on these ones, even though they are linked on their website https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onfocusin.

[maranomynet]

Ah, I see now that onFocus does in fact "bubble" like in React! Wonderful!

My initial interpretation of "no synthetic events, just plain browser events" and what must have been a simple coding error with onFocus led me to hastily assume I needed to resort to focusin/focusout.

(...similar to the difference in Preact's onChange and React's event of same name)

Out of curiosity: Is there anything technically wrong with useing lower case event props instead of the camelCased ones?
I assume the hyperscript (h()) function simply tacks them on the DOM Element like any other JavaScript property, but does it really hurt outside being non-idiomatic?

[marvinhagemeister]

@maranomynet no, there is nothing wrong with using lowercased events. In fact we map those 1:1 to native DOM events👍