#'KeyboardEvent<HTMLDivElement>' is not assignable to parameter of type 'KeyboardEvent'

1 messages · Page 1 of 1 (latest)

bright iron
#

Any clue why this is happening? And how it can be solved? This is a simplified exampe, as the tableKeyDown is exported from a library that does not depend on react

regal mural
#

so you've found another type KeyboardEvent with the same name as the one from lib.dom.d.ts, but a distinct type

#

ah it's a react synthetic event as opposed to a real dom event

#

You'll need to modify your object to use React's KeyboardEvent instead of the global one

#

probably just need to do import { type KeyboardEvent } from "react" in the file that declares the parameter type

bright iron
#

Though I pasted the Playground:

rancid swallowBOT
#
costanull#0
Playground Link

Preview:```ts
import React from "react"
const tableKeyDown = (e: KeyboardEvent) => {
console.log(e)
}

const Test = () => {
console.log("12345")
return (
<div onKeyDown={e => tableKeyDown(e)}>Test</div>
)
}```

You can choose specific lines to embed by selecting them before copying the link.
bright iron
#

How can a library in JS delegate cases like this when consumers can be React apps? @regal mural

regal mural
# 
const tableKeyDown = (e: KeyboardEvent | React.KeyboardEvent) => {
    console.log(e)
}

might be a solution

#

the problem is that react's synthetic events do not necessarily adhere to the DOM standard

#

you'll only be able to safely use some subset of the properties on e

#

but you probably won't hit any differences

#

@bright iron