TextField onKeyDown typescript event type is incorrect

[Swazimodo]

• This is not a v0.x issue.
• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

A function with an event arg of type KeyboardEvent should for the onKeyDown event handler.

Current Behavior

This event handler expects KeyboardEvent which is counter intuitive.

Steps to Reproduce

<TextField
   onKeyDown={(event: KeyboardEvent<HTMLInputElement>) => {}}
/>

Context

I'm using typescript in our environment and some TextField events like onChange will use HTMLInputElement type but the key down event expected HTMLDivElement. I would have expected all event handlers to use the same types.

Your Environment

Tech	Version
Material-UI	v^1.1.0
React	v^16.3.2
Chrome	v68.0.3440.106
TypeScript	v2.8.4

[lukePeavey]

@Swazimodo
I took a look at the TextField props ... it doesn't expose onKeyUp/onKeyDown props for the input, like it does with onChange. So when you use these props on TextField they are spread to the root div element, not passed down to the input.

You can use InputProps to access the Input's onKeyUp/onKeyDown props, which have the expected types.

<TextField
  InputProps={{
    onKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => {},
  }}
/>

[eps1lon]

@Swazimodo Is right that it does attach those listeners to a div but this is only relevant for currentTarget. The target will still be the input element: https://codesandbox.io/s/p90k1rwpym

As a workaround you can do what @lukePeavey suggested.

Doing this correct in our type declarations would require quite some work so I'm more than happy to accept PRs.

[eps1lon]

Accepted answer: #12946 (comment)