flowtypeflow-typed

Cannot get property offsetX from SyntheticMouseEvent

When i try to access offsetX from a SyntheticMouseEvent triggered, Flow throw this error:

[flow] Cannot get event.nativeEvent.offsetX because property offsetX is missing in Event 1. (References: 1)

_handleClick = (event: SyntheticMouseEvent<HTMLDivElement>): void => console.log(event.nativeEvent.offsetX);

The only 'workaround' i have for now is to type the event as a MouseEvent:

_handleClick = (event: MouseEvent): SyntheticMouseEvent<HTMLDivElement>

But and if i'm not mistaken, Event triggered in a React component are always SyntheticEvent, so my workaround is a hack. Do you know a better way to type this ?

Flow-try (but this will not be really helpfull as SyntheticMouseEvent is not defined)

Solution

  • Instead of writing event.nativeEvent.offsetX, I would write (event.nativeEvent: MouseEvent).offsetX (I cast the native event to MouseEvent before accessing to offsetX).

    Note : MouseEvent comes from dom.js (that you don't need to import or require), see https://github.com/facebook/flow/blob/master/lib/dom.js#L284