Moveable: After making element group ,not able to make inside element editable by contentEdtiable="true", suggest a solution for that because non of clicking events work on that

[Nazakatalikharal]

Environments

• Framework name: ReactJS
• Framework version: 16.13.1
• Moveable Component version: react-selecto + react-moveable

Description

i try to make group inner element after click or any event editable, but non of event work for me , i want to make element editable by contentEdtiable="true", please suggest solution for that...

[daybrush]

@Nazakatalikharal
Could you ever share your address again?

[Nazakatalikharal]

sorry... which address are you talking about ?

[Nazakatalikharal]

if you're talking about codesandbox address then here it is https://codesandbox.io/s/sparkling-darkness-or805

[daybrush]

@Nazakatalikharal

Update react-moveable 0.22.0-rc9 and try this code:
onClick, checkInput
https://codesandbox.io/s/proud-pond-nf4jb?file=/src/App.js

[Nazakatalikharal]

still on group span onClick doesn't work
https://www.screencast.com/t/nDfDMiRhIY6V
https://codesandbox.io/s/amazing-driscoll-52yg2?file=/src/App.js

[Nazakatalikharal]

[Nazakatalikharal]

[daybrush]

@Nazakatalikharal
Add dragArea={!this.state.groupEditing}

[Nazakatalikharal]

@daybrush
group is editable now but after editing when we click on others element and click again on same edited element , this error shows
https://www.screencast.com/t/sWVyvj5X6
https://codesandbox.io/s/amazing-driscoll-52yg2?file=/src/App.js

[Nazakatalikharal]

@daybrush
after editing inner group span , no group dragging works, also inner group only single span is editable not multiple

https://www.screencast.com/t/lvmYMODSRJ

https://codesandbox.io/s/vibrant-leakey-b8byo?file=/src/App.js

[Nazakatalikharal]

how i can stop "onDragGroupStart" with , this.moveableRef.current , kindly also tell how i can stop react-selecto "onDragStart" with this.selectoRef ...

[daybrush]

@Nazakatalikharal

Update 0.22.0-rc10(beta)

If you want to stop the drag event, return false.

Use passDragArea instead of dragArea and add blur event.

https://codesandbox.io/s/lucid-wood-tr1m7?file=/src/App.js

[Nazakatalikharal]

@daybrush
passDragArea work well currently if their'll be issues i'll let you know, thanks for you guidance and support

[daybrush]

• moveable 0.19.1
• react-moveable 0.22.3
• preact-moveable 0.21.3
• ngx-moveable 0.15.1
• svelte-moveable 0.10.1

moveable's official new version is released. Check it again. Thank you :)