(feature) Event props on components

[necolas]

Describe the feature request

Support web standard event props on all components. This element is not currently supported on native. Although some event props exist in React Native, most of the events are not fired synchronously and/or at the right time, and the event objects themselves do not match web standards (apart from the new PointerEvent implementation).

• onAuxClick
• onBeforeInput (input)
• onBeforeInput (select)
• onBeforeInput (textarea)
• onBlur
• onChange (input)
• onChange (select)
• onChange (textarea)
• onClick
• onContextMenu
• onCopy
• onCut
• onError (img)
• onFocus
• onGotPointerCapture
• onInput (input)
• onInput (select)
• onInput (textarea)
• onInvalid (input)
• onInvalid (select)
• onInvalid (textarea)
• onKeyDown
• onKeyUp
• onLoad (img)
• onLostPointerCapture
• onPaste
• onPointerCancel
• onPointerDown
• onPointerEnter
• onPointerLeave
• onPointerMove
• onPointerOut
• onPointerOver
• onPointerUp
• onSelect
• onSelectionChange

One way to approach this could be to introduce new, synchronous event props in React Native (e.g., onKeyDownSync) that do not require changes to the existing event props. There has been interest in doing this for existing RN use cases beyond web compability. RSD could then use these new props (and rename them in the user-space layer for now) to provide events and event objects that match web.

[robik]

Hey, I'm currently researching the topic and working on some kind of React Native RFC and I wonder if this issue scope also covers the event bubbling and propagation, or is it a different scope? As in, should we be able to listen on onPressCapture on arbitrary <View> and have possibility to stop propagating it (e.g. to disable onClick in that view and children)?

[rubennorte]

Hey, I'm currently researching the topic and working on some kind of React Native RFC and I wonder if this issue scope also covers the event bubbling and propagation, or is it a different scope? As in, should we be able to listen on onPressCapture on arbitrary <View> and have possibility to stop propagating it (e.g. to disable onClick in that view and children)?

I think that's also in scope but it might take a while to align how events work in RN and on Web.

[necolas]

I wonder if this issue scope also covers the event bubbling and propagation

Yes definitely. The events have to match W3C events as exposed in React DOM - they need to be sync, dispatched in the expected sequence, and the payload has to match the W3C events (then wrapped by React's event system).

The event prop names there are a bit different to what we'll probably end up using (on-click vs onClick), because we'll probably not attempt to undo React DOM's event wrappers at this stage. https://github.com/necolas/discussions-and-proposals/blob/reduce-fragmentation/proposals/0000-reduce-fragmentation.md#common-events

I'm less concerned about supporting the capture phase props (at the moment we don't allow them in RSD on web), because in React DOM those props don't match the browser's native capture phase. The event props are implemented using event delegation and they are called after the native capture and bubble phase has already taken place, i.e., it's an emulated capture phase. As such, you can't really use the React capture phase props for anything useful - typically app developers have to use the EventTarget API to work with the native capture phase and actually prevent the native event from being propagated.

There's a separate issue on supporting the EventTarget API on host nodes (#37). That API allows for more customization options, and it supports custom event dispatching which we'll need too https://github.com/necolas/discussions-and-proposals/blob/reduce-fragmentation/proposals/0000-reduce-fragmentation.md#eventtarget