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

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

smoldovanskiysmoldovanskiy Posts: 59Questions: 7Answers: 0

Using bootstra4 styling.

I do not see this issue in your examples.

This question has an accepted answers - jump to answer

Answers

  • smoldovanskiysmoldovanskiy Posts: 59Questions: 7Answers: 0

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

  • smoldovanskiysmoldovanskiy Posts: 59Questions: 7Answers: 0
    edited August 2021

    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;
                        }
                    });
    
  • smoldovanskiysmoldovanskiy Posts: 59Questions: 7Answers: 0

    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',
                });
            });
    
  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    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

  • smoldovanskiysmoldovanskiy Posts: 59Questions: 7Answers: 0

    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....

  • smoldovanskiysmoldovanskiy Posts: 59Questions: 7Answers: 0

    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(),

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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

  • smoldovanskiysmoldovanskiy Posts: 59Questions: 7Answers: 0

    Using 1.9.5

    I guess I need to update.

  • smoldovanskiysmoldovanskiy Posts: 59Questions: 7Answers: 0
    edited September 2021

    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()

  • smoldovanskiysmoldovanskiy Posts: 59Questions: 7Answers: 0

    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;
                    }
                },
    
  • smoldovanskiysmoldovanskiy Posts: 59Questions: 7Answers: 0

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

    result += "

    " + full.NarrativeNew + "

    ";

  • smoldovanskiysmoldovanskiy Posts: 59Questions: 7Answers: 0

    do i need to update the datatables too?

    1.10.22

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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

  • smoldovanskiysmoldovanskiy Posts: 59Questions: 7Answers: 0

    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?

  • smoldovanskiysmoldovanskiy Posts: 59Questions: 7Answers: 0

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

  • tangerinetangerine Posts: 3,342Questions: 35Answers: 394

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

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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

  • smoldovanskiysmoldovanskiy Posts: 59Questions: 7Answers: 0

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

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    Answer ✓

    Hi,

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

    Allan

  • smoldovanskiysmoldovanskiy Posts: 59Questions: 7Answers: 0

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

Sign In or Register to comment.