DBlclick to open cell causing issues in HOT when stopPropagation is called

Tags: #<Tag:0x00007f8b2672aa98>

Hi ,
I am using handsontable 6.2.2 with vue js and a custom editor component.(lets say a vue library selectbox comp for example)

On pressing Enter ->
Editor.open() is fired , I position my selectbox(vue component) on the current edited cell and toggle the display property to show and focus it to open the selectbox’s options dropdown.

But on double-clicking a cell the following sequence of events happens
mousedown,mouseup,clickevent , mousedown,mouseup (handson detects this as a double click and triggers …beginEditing()->editor.Open() . now I position and make visible my selectbox and focus it .
Works fine till here . now the event propagates and reaches the document .My select component has a click-outside listener implemented by listening to document.onmouseup . this cause my options list to close .

An easy way to solve this is it to do event.stopPropogation() in editor.open() . but this causes issues with HOT .
if I just move mouse over other cells without finishing editing, the hovered cell get selected etc.
I’m guessing handson does work up on the dom ancestors with the event.

So I need to do stopPropagation on event in editor.open() but without affecting HOT or need another hook which after a double click from which I can call editor.open()

NOTE : this is all with respect to the this.TD element in handsoneditor

Please help.

Can you send over a demo, @sainathsr95?

Hi ,very sorry for the delay ,
I’ve made a codesandbox with vue ,element ui component and handsontable

the last column is mapped to custom select editor,

Try double clicking the cells to open and enter to open . The difference is clear

you can uncomment event.stopPropagation(); in SelectEditor to check .

Thanks!

Hi @sainathsr95

In my opinion, stopPropogation isn’t a crucial issue.
After dbclick your editor is behind our editor. And after close doesn’t save the value.

So I think you should follow our tutorial exactly. Here is a link to the tutorial - https://handsontable.com/docs/7.3.0/tutorial-cell-editor.html and https://handsontable.com/docs/7.3.0/frameworks-wrapper-for-vue-custom-editor-example.html

hi the editor is not behind , try opening it by selecting a cell and pressing ENTER key ,Then do the same via double clicking . See the difference ?
I have only posted a minimum example ,have not implemented value saving in this example . but in the actual code , I bind v model of the vue component to the active cell being edited

Hi @sainathsr95

I’m not sure.
For me, your editor is behind us independently which way to open you have chosen.

Here is a screenshot after using Enter