Flow: EventTarget has no property (scrollLeft, scrollTop)

[NullDivision]

When setting up event listeners I get an error. It would appear EventTarget isn't extending or implementing properties from the Element type.

      tableContainer.addEventListener('scroll', (e: { target: EventTarget }) => {
        // check if the scroll is Horizontal by comparing it to its previous value
        if (
          e.target instanceof Element &&
          e.target.scrollLeft !== parseInt(getAttribute(tableContainer, 'lastHorizontalScroll'), 10)
        ) {
          // something here
        }
      });

Error:

src/helpers/tables.js:22
 22:           e.target.scrollLeft !== parseInt(getAttribute(tableContainer, 'lastHorizontalScroll'), 10)
                        ^^^^^^^^^^ property `scrollLeft`. Property not found in
 22:           e.target.scrollLeft !== parseInt(getAttribute(tableContainer, 'lastHorizontalScroll'), 10)
               ^^^^^^^^ EventTarget

[derekdreery]

Note that it is a working draft at present: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollLeft

[derekdreery]

I dug in the code and it looks like we need a type that is something like Event<HTMLElementTarget>, although I don't know how to do this.

[calebmer]

This works as specified. EventTarget has no scrollLeft property: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget

[bvaughn]

I'm late to the party, but in case someone else comes across this issue in the future: use currentTarget instead 😄 eg:

function onScroll(event: SyntheticEvent<HTMLDivElement>) {
  event.target.scrollTop; // Fails: Property not found in EventTarget
  event.currentTarget.scrollTop; // Works
}

[asolove]

Well, note that only works if you’re attaching the event straight to th target node. For event handlers that are attached somewhere higher up on the dom, that will not give you the same scrollTop value.

[bvaughn]

That's a good thing to point out.

I think it's reasonable not to expect Flow to infer anything about target since DOM events can bubble through many element types. The EventType parameter supplied to a SyntheticEvent is limited to the currentTarget.

[a7madgamal]

@asolove what do you suggest I do in that case?

property `hasAttribute`. Property not found in
 66:       event.target.hasAttribute('data-content')
           ^^^^^^^^^^^^ EventTarget

[asolove]

@a7madgamal flow can’t know statically what properties might be on the event. If you have proven to yourself that stuff will be there, try in your event handler casting the event to the mixed or any type and then grab specific bits off it. That bit of code won’t be type safe but this is how most people deal with this problem.