Checkbox cell type firing when checkbox in non-related custom editor changes

Tags: #<Tag:0x00007efc7284e570>
#1

We’re using a custom checkbox array editor, which uses Vue and Element UI under the hood.

It’s been working generally OK, but today I added a custom “checkbox” cell type and they seem to have some kind of clash.

When I click the checkbox in the custom renderer, the onChange event fires in the checkbox cell, and ultimately throws an error:

Uncaught TypeError: Cannot create property 'NaN' on number 'NaN'
    at DataMap.set (dataMap.js?a2e1:789)
    at applyChanges (core.js?cf0b:1139)
    at Object.eval [as onQueueEmpty] (core.js?cf0b:1275)
    at Object.checkIfQueueIsEmpty (core.js?cf0b:983)
    at validateChanges (core.js?cf0b:1082)
    at Core.setDataAtCell (core.js?cf0b:1274)
    at onChange (checkboxRenderer.js?053d:367)
    at HTMLDivElement.eval (checkboxRenderer.js?053d:263)
    at HTMLDivElement.callbackProxy (eventManager.js?8c32:65)

image.png883×550 90.5 KB 

// on line 367 row and col will both be passed as NaN
instance.setDataAtCell(row, col, newCheckboxValue);

I’ve attempted to stop event bubbling in Vue, but I don’t get the event from the component, and it is sealed from me. There may be something I am missing here.

However, this does feel like a bug - code in one cell should not be affected by code in another.

That being said, I know that HOT is pretty darn complex under the hood – so I understand if there may be technical or architectural reasons that this should be “handled” at my end.

Unless we can fix this, my next step would be to build a custom checkbox renderer.

Any thoughts?

On another note, deleting a row with a checked checkbox and undoing it leaves the checkbox in the unchecked state :frowning:

Using space shortcut to check a custom rendered checkbox
Custom editor / multiple cell focus question
#2

Good news!

I can prevent the event bubbling by using the native modifier on the @change event handler in Vue:

      <el-checkbox ref="checkbox"
                   v-for="option in options"
                   :label="option[keyValue]"
                   :key="option[keyValue]"
                   @change.native.stop="e => {}"
      >
#3

That was a quick update :slight_smile: we’re working in completely different time zones so each time I read your threads it already has an update. I’m very glad to see this going so smooth.

#4

Ha! Yes. Thanks for checking in :slight_smile:

What do you think about the clash itself though?

Do you know why a seemingly unrelated cell is responding to events in the source cell?

My guess is there’s some kind of global event handler which is handling events?

Do you think the behaviour is undesirable in some cases?

#5

I don’t know if I’ll be able to tell anything without the code. We’re still waiting here Custom editor / multiple cell focus question maybe you could just post te editor and renderer in on JSFiddle/StackBlitz?

#6

Ah, yes, did that over the weekend - let me upload…

#7