TypeError on click to column header

Tags: #<Tag:0x00007f8b1dbd4070> #<Tag:0x00007f8b1dbdbe38>
#1

We have a handsontable implementation that implements custom cell editors. We have custom column headers that contain simple text input fields.

After upgrading HOT version, we notice that when a cell editor is open and a column header input field is clicked, an error is raised in the browser console. The error also prevents the new cell value in the editor from being committed.

The error log from the console is below. It appears that HOT is attempting to get the last selection (getSelectedLast) and expects it to have a value, but it is undefined in this case. This causes the TypeError. Is this issue known and can it be remedied?

Core-c2a36204.js:43176 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'highlight')
at uT.prepareEditor (Core-c2a36204.js:43176:44)
at Core-c2a36204.js:43169:19
at Pa._closeCallback (Core-c2a36204.js:61192:20)
at Pa._fireCallbacks (Core-c2a36204.js:61070:34)
at Pa.discardEditor (Core-c2a36204.js:61228:286)
at Pa.cancelChanges (Core-c2a36204.js:61219:36)
at O.W.onQueueEmpty (Core-c2a36204.js:60063:19)
at Object.checkIfQueueIsEmpty (Core-c2a36204.js:60049:67)
at Object.removeValidatorFormQueue (Core-c2a36204.js:60044:104)
at Core-c2a36204.js:60076:13
#2

Hi @jaakko.santala.exter

Thank you for contacting us. As building a custom editor greatly varies with each implementation we will need a code demo showing your solution to determine what can be wrong. Please send us a minified example in a sandbox of your choice, preferably CodeSandbox or StackBlitz.

#3

Ok I understand. I will need to re-create our implementation and strip out the parts which I cannot share, which will take a bit of time. Meanwhile I wonder if this could be of assistance in pinpointing the error: The error originates in HOT in prepareEditor() (code at the end) in a situation where getSelectedRangeLast() is undefined (and therefore accessing .highlight causes an error). We have re-implemented getColHeader() and its returning our custom html. The html looks like below. So when our editor is active and you directly click the header input field, an error is raised. Could it be that HOT is interpreting the click on the column header as trying to open an editor, which assumes a cell needs to be selected for it to work?

<div class="hot-filter__controls_wrapper hot-filter__control">
    <input placeholder="example" autocomplete="off" type="text" value="">
</div>

** Code snippet from HOT **
prepareEditor() {
if (this.lock)
return;
if (this.activeEditor && this.activeEditor.isWaiting()) {
this.closeEditor(!1, !1, l=>{
l && this.prepareEditor()
}
);
return
}
const {row: e, col: r} = this.instance.getSelectedRangeLast().highlight
, n = this.instance.runHooks(“modifyGetCellCoords”, e, r);
let o = e
, i = r;
Array.isArray(n) && ([o,i] = n),
this.cellProperties = this.instance.getCellMeta(o, i);
const {activeElement: s} = this.instance.rootDocument;
if (s && sD(s) && s.blur(),
!this.isCellEditable()) {
this.clearActiveEditor();
return
}
const a = this.instance.getCell(e, r, !0);
if (a) {
const l = this.instance.getCellEditor(this.cellProperties)
, c = this.instance.colToProp(i)
, u = this.instance.getSourceDataAtCell(this.instance.toPhysicalRow(o), i);
this.activeEditor = ale(l, this.instance),
this.activeEditor.prepare(e, r, c, a, u, this.cellProperties)
}
}

#4

Hi @jaakko.santala.exter

I understand. Unfortunately this code snippet is not enough to properly check it, so I will wait for the code example from you, and then we will continue with the investigation.

#5

Hi @jaakko.santala.exter

Do we have any updates regarding the demo?