How to prevent tabulator input to close when clicking elsewhere - tabulator

Question

I have a custom datepicker calendar I want to show for editing dates in tabulator. I have managed to open the calendar when the row cell is click by providing a custom editor.
The problem is that as soon as I click on my calendar, (what I think happens) is that Tabulator´s "As a fallback Tabulator will cancel the edit if an editor is blured and the event has not been correctly handled." behavior triggers before I can process the click on my calendar and update the cell value.
Is there a way to allow the user to click on the calendar without making tabulator cancel the edit?

Answer 1

Don't know which custom date picker you are using but here is a working example using flatpickr:
let initialTableData = [{
eventName: "Christmas party",
eventDate: "12-25-2021"
},
{
eventName: "New Years party",
eventDate: "12-31-2021"
}
]
function dateEditor(cell, onRendered, success, cancel, editorParams) {
let editor = document.createElement("input")
editor.value = cell.getValue()
let datepicker = flatpickr(editor, {
dateFormat: "m-d-Y",
onChange: setDate,
onClose: setDate
})
function setDate(selectedDates, dateStr, instance) {
success(dateStr)
instance.destroy()
}
onRendered(() => {
editor.focus()
})
return editor
}
let eventTable = new Tabulator("#eventTable", {
data: initialTableData,
columns: [{
title: "Event",
field: "eventName",
width: 200
},
{
title: "Event Date",
field: "eventDate",
editor: dateEditor
}
]
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/tabulator/5.0.7/js/tabulator.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.9/flatpickr.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/tabulator/5.0.7/css/tabulator.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css" rel="stylesheet" />
<div id="eventTable"></div>
Here is the CodePen