Inline Editor closing when dragging to select text in input or textarea.

smoldovanskiy

Using bootstra4 styling.

I do not see this issue in your examples.

smoldovanskiy

If you drag outside of the cell it closes the inline editor

smoldovanskiy

using this to check if value was changed. Could the on initSubmit be the issues?

var openVals;
            editor
                .on('open', function (e, type) {
                    openVals = JSON.stringify(editor.get());
                })
                .on('initSubmit', function (e, action) {
                    if (openVals === JSON.stringify(editor.get())) {

                        editor.close();

                        return false;
                    }
                });

smoldovanskiy

initiating editor like so

        $('#fees').on('click', 'tbody td div.editable', function (e) {
            editor.inline(table.cell($(this).closest('td')).index(), {
                onBlur: 'submit',
                submit: 'changed',
            });
        });

colin

Yep, it'll be that onBlur: 'submit' - that's saying to close the form and submit whenever a blur to the form would occur. That's probably not set on the example of ours that you're referring to.

Colin

smoldovanskiy

Thank you for the response, I don't think this is it.

Your onBlur submit example works correctly. When selecting the text in the editor textbox, if you click inside textbox then drag outside of it and let go of mouse button, it does not close. Only closes if you click fully outside of it.

It is not working that way for me. When I click into textbox, drag and release button outside it closes immediately. This is problematic, since user will not be able to select text without precisely staying within the textbox....

smoldovanskiy

Could it have to do with this initialization using the index?

You examples just pass in this, but that was not working for me. I got the code below when I asked for help on this forum.

'''
editor.inline(table.cell($(this).closest('td')).index(),

allan

In this example - if you pop the console open in your browser and enter:

 $('#example').on( 'click', 'tbody td', function (e) {
        editor.inline( this );
} );

it will activate inline editing. it appears to be okay in that example when you click on a cell and then click and drag to select text in the input, while ending the click outside the target cell.

That suggests to me it might a version issue. That page is using Editor 2.0.5. What version are you using?

Allan

smoldovanskiy

Using 1.9.5

I guess I need to update.

smoldovanskiy

I updated and am still getting the same issue

I am still thinking it has something to do with how the editor gets called to open.

$('#fees').on('click', 'tbody td div.editable', function (e) {
    editor.inline(table.cell($(this).closest('td')).index(), {
        onBlur: 'submit',
        submit: 'changed',
    });
});

could this be the issue?

table.cell($(this).closest('td')).index()

smoldovanskiy

this is what the field looks like

{
                data: "NarrativeOldNew",
               // width: "250px",
                render: function (data, type, full, meta) {
                    var result = "";

                    if (full.ActionID == 5) {
                        result += "<div style='margin-right:7px;'>" + full.NarrativeNew + "</div>";
                    } else {
                        result += "<div class='editable editableDivStyle'>" + full.NarrativeNew + "</div>";
                    }
                    if (full.Narrative != full.NarrativeNew) {
                        result += "<a tabindex='0' class='badge badge-danger' role='button' data-toggle='popover' data-trigger='focus' title='Original Narrative' data-content='" + full.Narrative + "'><svg class='bi bi-exclamation-triangle text-white' width='16px' height='16px' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M7.938 2.016a.146.146 0 0 0-.054.057L1.027 13.74a.176.176 0 0 0-.002.183c.016.03.037.05.054.06.015.01.034.017.066.017h13.713a.12.12 0 0 0 .066-.017.163.163 0 0 0 .055-.06.176.176 0 0 0-.003-.183L8.12 2.073a.146.146 0 0 0-.054-.057A.13.13 0 0 0 8.002 2a.13.13 0 0 0-.064.016zm1.044-.45a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566z' /><path d='M7.002 12a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 5.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995z' /></svg></a>";
                    }
                    return result;
                }
            },

smoldovanskiy

simply put it just places the narrative text into a styled div

result += "

" + full.NarrativeNew + "

";

smoldovanskiy

do i need to update the datatables too?

1.10.22

allan

I can't think of anything between DataTables 1.10.22 and 1.11.0 that would cause that error. Can you give me a link to your page so I can trace it through with a debugger please?

Thanks,
Allan

smoldovanskiy

It is an internal application so I cannot provide a link to it.

would it be possible to set up a sandbox to try and reproduce?

Can I debug it on my end, you guys have some kind of tool right?

smoldovanskiy

i also noticed i get same behavior with stand alone editor field outside of a datable.

tangerine

Here's how to provide a test case:
https://datatables.net/manual/tech-notes/10

allan

If we take this example and you pop open the console and run:

$('#example').DataTable().select.style('api')
$('#example').on( 'click', 'tbody td', function (e) {
    editor.inline( this );
} );

Then it will enable inline editing for the table. I've not been able to reproduce the error you are seeing, and you indicate above that you couldn't reproduce it in our examples.

I'm afraid that without being able to see this happen, there isn't too much help I can offer as I can't debug it.

Allan

smoldovanskiy

I purchased support credits, would you be able to help me debug this in my environment?

allan

Hi,

I've sent you a reply via e-mail .

Allan

smoldovanskiy

just FYI for anyone having this issue, update to latest editor to resolve