After inline submission on enter first button event is triggered

Flandre

I recently upgraded from Bootstrap 3 to Bootstrap 4 and from datatables 1.10.13 to 1.10.16.
I am using editor mostly with the inline option, on enter I post back to the server to save the record in the database. Right after that datatables automatically makes another get request to refresh the data.
After that process is complete datatables now executes the first event in the button bar (if "new" is the first event it pops up the new record modal, if "export to excel" is the first button it automatically download and excel file).

I have isolated the code that triggers the first button click event as seen in the screenshot below

This screenshot shows that after successful reload of the datatable the new record event pops up automatically.

I downgraded my code back to version 1.10.13 and while the layout is messed up now datatables behaves as expected. The "New" button is not triggered

Any ideas what might be causing this issue?

Thanks.

allan

My guess is that there is something which should have a context somewhere (i.e. limiting the scope of a selector), which is actually undefined and thus selecting the first element matching in the global scope.

Could you give me a link to a page showing the issue so I can debug it please? I've not come across that issue before.

Thanks,
Allan

Flandre

Try this link, click on any "Notes" cell and make a change.

http://108.213.36.161/back-office/payroll/time-entry

allan

That is the oddest thing I've seen in a long time. I'm afraid I don't have an answer for it yet. When you press return, there is a click event on the New button, which is happening before anything else, and I can't see where that is coming from.

Still working on it.

Allan

Flandre

Well actually when I hit return the data is getting posted back to the server, then the get event fires to reload the table (which you clarified in a separate post that this is by design). The "New" click does not happen until after that.

And again to be clear...if I don't have the new button as the first button but instead an Export to Excel button then the export button will be triggered. So it seems that the first button event gets triggered regardless of what it is.

Flandre

try to run this code where I downgraded to the previous version. Here the fake click event does not trigger

http://108.213.36.161/back-office/payroll/time-entry?downgrade=1

allan

Wow - that took me absolutely ages to figure out! The key change is in Buttons 1.5.0 where the tag used for the buttons was changed from a to be button. Normally that wouldn't be an issue, but when you have a button inside a form element, pressing return on any input element inside the form will trigger the first button in the form!

If you remove the empty form tag from your page (it isn't doing anything anyway) the problem should be resolved.

Regards,
Allan

Flandre

Thank you so much. That fixed the issue. Not sure why that form tag ended up there in the first place.