add blur when mouseDown

Author: Kenneth Cheng

package-lock.json

@@ -2,7 +2,7 @@
   "name": "vue3-excel-editor",
   "email": "apple.6502@gmail.com",
   "description": "Vue3 plugin for displaying and editing the array-of-object in Excel style",
-  "version": "1.0.54",
+  "version": "1.0.55",
   "main": "src/main.js",
   "dependencies": {
     "@vuepic/vue-datepicker": "^3.3.0",

package.json

@@ -2331,9 +2331,14 @@ export default defineComponent({
         const row = e.target.parentNode
         const colPos = Array.from(row.children).indexOf(e.target) - 1
         const rowPos = Array.from(row.parentNode.children).indexOf(row)
+
+        if (colPos !== this.currentColPos || rowPos !== this.currentRowPos)
+          this.inputBoxBlur()
+
         this.currentField = this.fields[colPos]
         this.currentCell = row.children[colPos + 1]
         this.currentRecord = this.table[this.pageTop + rowPos]
+
         this.$emit('cell-click', {rowPos, colPos}, this.currentCell.textContent, this.currentRecord, this.currentField, this)
         if (typeof this.currentField.cellClick === 'function')
           this.currentField.cellClick(this.currentCell.textContent, this.currentRecord, rowPos, colPos, this.currentField, this)
@@ -2344,6 +2349,7 @@ export default defineComponent({
           this.refresh()
           return
         }
+
         setTimeout(() => this.inputBox.focus())
         this.focused = true
         this.moveInputSquare(rowPos, colPos)