onCompositionStart, onCompositionEnd, and onCompositionUpdate are bound to the wrong case-sensitive event name.

[xorgy]

Reproduction

Steps to reproduce

• Add an onCompositionStart to a Preact dom element
• Try using an input method on that input, making sure to start a composition.

Expected Behavior

The onCompositionStart handler should be called.

Actual Behavior

The onCompositionStart handler doesn't get called because Preact binds it to "CompositionStart" rather than "compositionstart"

The same applies for "compositionend" and "compositionupdate".

[xorgy]

I think this is an issue with the way Preact decides whether to case-fold events: it checks whether the element has a property named the case-folded version of the property starting with 'on', but even where "compositionstart" and "compositionend" are supported, they do not expose properties on the element, so Preact does not case fold.

[xorgy]

I have a branch https://github.com/xorgy/preact/tree/fix-composition-events with our workaround, obviously there's some golf to be done around this.

[brainlessbadger]

Same applies to focusin, focusout, beforeinput and probably some other events.

[marvinhagemeister]

Need to look into it more in depth what's up with the casing. Regardless, Preact has always and will always support attaching event handlers with the exact casing defined in the HTML/DOM specs. That is the lowercase variants all work:

<input onfocusin={...} />

[xorgy]

Probably the type definitions on the JSX should never have been camelCased to begin with. Attaching props not in that type can make things look funny in tooling for TypeScript, though you are correct that it can be done. @marvinhagemeister

[JoviDeCroock]

I wonder whether we can make the condition here more elaborate to cover these cases https://github.com/preactjs/preact/blob/main/src/diff/props.js#L72-L74