here is a code snippet demonstrating the problem:
import React from 'react'
import ReactDOM from 'react-dom'
class App extends React.Component {
render() {
return (
<div contentEditable="true">
<p>
<span onKeyDown={(e)=>{
alert("hello world!!")
}}>Hello world</span>
</p>
</div>
)
}
}
ReactDOM.render(
<App />,
document.getElementById('container')
);
After focusing on the div and pressing some buttons, the alert is not triggered. Why?
https://codesandbox.io/embed/react-playground-forked-fymxg3?fontsize=14&hidenavigation=1&theme=dark
The content of contenteditable element is treated as user input, not being part of the DOM. Same as text in the <input> element.
Thus, you cannot interact with value of that element as you do with normal DOM - meaning no event handlers for you here.