VueJs blur javascript error


After following the sample & setting up a spreadsheet (v3.1.4) in a new VueJs (2.6.11) project, when I run I get a js error after selecting a cell for edit and blurring:

Uncaught TypeError: Cannot read property 'input' of null
at e.blur (spreadsheet.min.js?45dd:21)
at e.endEdit (spreadsheet.min.js?45dd:12)
at t.eval (spreadsheet.min.js?45dd:12)
at eval (spreadsheet.min.js?45dd:12)
at (<anonymous>)
at (spreadsheet.min.js?45dd:12)
at t.setSelectedCell (spreadsheet.min.js?45dd:21)
at eval (spreadsheet.min.js?45dd:21)
at eval (spreadsheet.min.js?45dd:12)
at (<anonymous>)


spreadsheet.min.js?45dd:12 Uncaught TypeError: Cannot read property 'el' of null
at e._restoreFocus (spreadsheet.min.js?45dd:12)
at eval (spreadsheet.min.js?45dd:12)

Any ideas? Are there any working examples? Currently evaluating the component


Could you please share a code with your spreadsheet initialization.

  <v-row class="fill-height" no-gutters>
<v-col :cols="4">
  <div ref="container" class="widget-box fill-height pa-0 ma-0 sheet"></div>
<v-col :cols="8">
  <apexchart class="fill-height pa-2" type="line" :options="options" :series="series"></apexchart>

import { Spreadsheet } from "dhx-spreadsheet";
import "dhx-spreadsheet/codebase/spreadsheet.min.css";
import store from "../store";
import Vue from "vue";
import VueApexCharts from "vue-apexcharts";

Vue.component("apexchart", VueApexCharts);

export default {
  props: {
toolbar: Array,
editLine: { type: Boolean, default: false },
menu: Boolean,
rowsCount: Number,
colsCount: Number
  data: function() {
return {
  spreadsheet: null,
  events: "",
  options: {
    chart: {
      id: "vuechart-example"
    xaxis: {
      categories: []
  series: [
      name: "series-1",
      data: []
  mounted: function() {
this.spreadsheet = new Spreadsheet(this.$refs.container, {
  toolbar: this.toolbar,
  editLine: this.editLine,
  rowsCount: this.rowsCount,
  colsCount: this.colsCount

for (let i = 1; i < store.state.payments.length; i++) {
  const cell = "A" + i;
  const value = store.state.payments[i];
  this.spreadsheet.setValue(cell, value);
}"afterValueChange", (cell, value) => {
  console.log(`Value in cell ${cell} changed to ${value}`);
  const payload = { cell: 4, amount: value };

  methods: {
updateChart() {
  this.series = [
      data: store.state.payments
  beforeDestroy: function() {

<style scoped>
.sheet {
  width: 100%;


Please, try to enable the editLine in your spreadsheet as a temporal workaround:

 editLine: true,


Yes that has worked. Thank you