How to save inline when you click on a header
How to save inline when you click on a header

I'm using the inline editor, similar to the example page: https://editor.datatables.net/examples/inline-editing/simple.html. You can duplicate the observed behavior using that sample page.
1. Click on a cell to edit.
2. Change the value.
3. Click on a cell header to lose focus.
4. If you click a header that sorts, click it a second time to resort and find the row cell you just tried to change.
What I'm seeing is that when you click a header cell, you lose your change to the editor cell. I first noticed this after adding column filters. I saw where users would make a change to a cell, then click on a column filter just to leave the cell and let their change commit.
I haven't figured out why the cell change doesn't commit just because you click on the header. If you click on the page to lose focus, it works ok. If you click on another cell, it works ok. From what I can tell, it doesn't work if you click on any header/footer.
This question has an accepted answers - jump to answer
Answers
That will be same wherever they click - by default, when the cell loses focus it will cancel the edit. This example shows how to submit
onBlur
,Colin
Thank you - this shed light on what was happening. In my code, I was also using the KeyTable extension, which just happened to show similar signs of the same issue.
After I removed that extension and set to use the inline/blur you mentioned, everything started working correctly. I had hoped to use that KeyTable extension, although I'll just skip it for now. It doesn't appear to release focus correctly.