Inline Editing - drop-down not closing/submitting

arnorbld

Hi guys,

I'm still on DT 1.13, I think it is, and I have a couple of lists that use the inline editor, including one that has a drop-down. This has been working for several years, and no problems have been reported, but I stumbled on this problem in some deeper testing.

This drop-down is dynamically loaded when the editor is activated, inside:

$('#task-and-po-table').on('click', 'tbody td.editable', function (e)

This function also has:
editor.inline(this, {onBlur: 'submit'});

where the task-and-po-table is the HTML table ID. What happens is that when the drop-down is dropped and an item is selected, if it is the SAME item as is already in the cell, the drop-down doesn't submit. I have tracked it down to this code that submits the data:

editor.on("open", function () {
    editor
        .field("postatus_new")
        .input()
        .on("change", function (e, d) {
            if (d === undefined) {
                editor.submit();
            }
        });

});

editor.on("close", function () {
    editor.field("postatus_new").input().off("change");
});

The if(d===undefined) is false when the same item is selected, so it never executes the editor.submit(). If I select a different item, then d is undefined, and the data is submitted.

For example. If I have items "A", "B", and "C" in my drop-down, and the cell has the value "A", then if I select "B" or "C", everything works correctly. But if I select "A", then the automatic submission doesn't run, and the drop-down is left in the cell.

If I click somewhere else, then the onBlur: 'submit' executes, and the data is submitted, and the drop-down closes.

This code is about 5 years old, and I do NOT remember why it is exactly as it is<g> but it does work fine with this one exception. This is not a huge problem, but it's annoying now that I know about it!

Any ideas on how to trigger the automatic submit when the same item is selected?

Best regards,
Arnor

rf1234

The default form options for inline editing are here:
https://editor.datatables.net/reference/option/formOptions.inline

By default only "changed" values are submitted. If you are using a form the default for submission is "all".

So you would have to change your form options like this for example:

...
table: "#yourTable",
formOptions: {
    inline: {
        submit: 'all',
        onBlur: 'submit'
    }
},
fields: [{
...

I remember needing "onBlur" specified twice because otherwise it didn't work.

So here is my inline editor call repeating it.

// Activate an inline edit on click of a table cell
$('#yourTable').on( 'click', 'tbody tr.thisClass td.thatClass',
    function (e) {
        editor.inline( this, {
            onBlur: 'submit'
        } );
} );`

allan

Hi Arnor,

This is a slightly tricky one, since change will trigger when the value selected changes, but that is not the case here. I wondered if input would trigger, but that is exactly the same.

I'm not actually sure there is a good way to do what you are looking for. You could listen for the click event - a click of an option inside an option select will trigger a click event on the select, but you'd need to know if the dropdown is shown or not, and there doesn't appear to be an API for that in the DOM.

You could perhaps use onBlur: 'submit' to get a submission when the user clicks away from the cell, but that is the closest I think there is at the moment.

Allan

arnorbld

Hi Allan,

Yes, that is what happens now: the user has to click outside the cell to "close" the drop-down. It works, but it's a bit klunky as an interface.

CoPilot has suggested something along the lines of this:

const dropdown = document.getElementById('myDropdown');

dropdown.addEventListener('mousedown', () => {
  setTimeout(() => {
    dropdown.blur(); // Forces dropdown to close
    document.forms['myForm'].submit(); // Optional: submit the form
  }, 100); // Delay ensures selection registers before blur
});

But I tried something similar yesterday and it did not work. It also suggested handling it with a focus event like this:

dropdown.addEventListener('focus', () => {
  dropdown.addEventListener('mouseup', () => {
    dropdown.blur(); // Close dropdown
    document.forms['myForm'].submit(); // Submit form
  }, { once: true });
});

I tried something similar yesterday as well, and again, that didn't work. And I'm not sure if the mouseup/mousedown would work on mobile devices, not entirely sure, but this needs to be mobile-friendly.

I'll mess with this some more and see if I find something useful and if I do, I'll report back