onChange event not firing

Do you want to request a feature or report a bug?

bug

What’s the current behavior?

Inputs and other tags inside custom elements can only be changed if they are within a portal. onKeyDown fires correctly, but onChange never fires. Others on the slack channel have also come across this bug, and state the only solution is placing the custom element within a portal.

CodeSandbox: https://codesandbox.io/s/slate-reproductions-wcko1

<input
    onChange={() => console.log('this never fires')}
    onKeyDown={() => console.log('but this works')}
/>

Slate: 0.57.1 Browser: Chrome OS: Mac

What’s the expected behavior?

onChange should fire in custom elements without needing to be inside a portal / pop-up.

[Francesco-Lanciana]

Hey this is quite the hack but if you wrap your input inside a div and give it the attribute data-slate-editor then the onChange handler should call. This fools Slate into thinking that the input is outside the editor so your input will work as normal. The issue I just created #3425 is more or less regarding the same thing, but my case was with CodeMirror which has a textarea whose onInput never fires. From what I can tell with some experimenting the culprit seems to be the Editable component that steals focus from inputs/textareas as you type. I would really like to get this resolved but in the meantime this hack seems to work nicely

[LiuJi-Jim]

Hey this is quite the hack but if you wrap your input inside a div and give it the attribute data-slate-editor then the onChange handler should call. This fools Slate into thinking that the input is outside the editor so your input will work as normal. The issue I just created #3425 is more or less regarding the same thing, but my case was with CodeMirror which has a textarea whose onInput never fires. From what I can tell with some experimenting the culprit seems to be the Editable component that steals focus from inputs/textareas as you type. I would really like to get this resolved but in the meantime this hack seems to work nicely

ugly, but it works😰😂