search

tajo / react-movable

🔀 Drag and drop for your React lists and tables. Accessible. Tiny.
https://react-movable.pages.dev
MIT License
1.55k stars 51 forks source link

Keyboard doesn't work for interactive elements #15

Closed tajo closed 4 years ago

tajo commented 5 years ago

If you place an interactive element (input etc) into the item, you can't control it with keyboard since space and other shortcuts are captured by the drag-n-drop navigation.

workzer commented 5 years ago

I had to deactivate the space navigation in order to use my form: renderItem={({ value, props }) => { props.onKeyDown = (e) => { return e }; return(<li {...props} className={"p-0 list-group-item"}>{value}</li>) }} Finding another way to deal with interactive forms would be really welcome, like having an agument to set a list of html nodes not touched by the drag and drops navigation system. For now, the only way to deal with some subevent(as far as I know) is to use native nodes like button, input, textarea, any other node would not trigger any click event.

tajo commented 4 years ago

Fixed and released.

gpicavet commented 2 years ago

Hello, still facing the problem with a wysiwyg editor using a contenteditable=true (like draft-js). EDIT : worth noting that the drafjs editor also use "textbox" role. checkIfInteractive could accept a custom filter to cover unknown edge cases.