editor-inline event "key-blur" not working when "enter" is pressed

dan@19ideas.com

So I was following the demo described here:

https://editor.datatables.net/examples/inline-editing/tabControl.html

Where I'm tabbing between columns. Everything works as expected. But I wanted to do some validations on each input. So when a user tabs out of a field, a pop up would show up indicating that the value isn't within a valid range.

So I added this:

("#example").on('key-blur', function (e, datatable, cell) {
    alert("did you click me?");
});

So when I hit the "enter" button on my keyboard, nothing shows up. Then when I click on a field, this alert box shows up (which shouldn't happen), and when I blur away, it shows up again. Apparently the demo in that page breaks this kind of functionality. Is there a way for this event to fire if you hit the "enter" button?

Also if you use an alert box, the character of tab gets inserted inside the textbox when tabbing. I'm thinking this event shouldn't really be used in this demo. But I need a way to get functionality during the onBlur part.

One of my solutions is to add a specific unique class to each inputbox, and then use jquery's blur, but I'd rather keep it within the realm of datatable's api so I don't keep cluttering things with my own jquery stuff.

allan

Are you using key-blur to perform the validation? I would recommend using preSubmit event if so. The problem with using key-blur is that hitting return doesn't blur the KeyTable focus - that cell stillhas focus, even if not editable without activating editing.

Allan

dan@19ideas.com

It's still not working. I still use the code mentioned in the tabbing through columns example. When I click on the textbox for the inline editing, the preSubmit code gets triggered. Nothing happens when I focus out of the textbox.

I need the validation to occur when I want to click out of the textbox, tab out of the textbox, or submit out of the textbox.

allan

Could you give me a link to the page so I can debug the issue please.

Allan

dan@19ideas.com

https://ir.19ideas.com/WebAthena/Curves/TestSite

This is development code so all the scripts are not minified. The code is located in:

WebAthena -> Scripts -> CurveManagement -> ConditionsContent.jsx

All the javascript code for the grid editor is under "componentDidMount"

and the html is in the "render" portion

I'm not sure if you're familiar with reactjs, but those are part of the lifecycles for react. It bundles the html together with the javascript for it so you don't have to go switching between html files and js files.

Currently if you go to line 238, you'll find this code:

    // Inline editing on tab focus
    table.on('preSubmit', function (e, datatable, cell) {
        alert("e is :" + e + " and datatable is: " + datatable + " and cell is: " + cell);
    });

if you put a breakput on the alert, then click on the data in the grid, it will break there. But when you exit out, there is no breakpoint there. I need the breakpoint to hit when I leave the textbox.

allan

Thanks for the additional information and the link. I wasn't aware before that you were using React and that might have a major impact since you have two different libraries trying to control the DOM at this point. indeed, looking at the breakpoint trace, create is creating an element when the click inside it happens, and that appears to be triggering at least part of the issue.

Also of note, you are currently using:

table.on('preSubmit', ...

But preSubmit is an Editor event, not DataTables. Could you try listening for preSubmit on the Editor instance.

You also have an event listener for open (called onOpen - they are the same thing) which is triggering a click event - and might well be what is causing React to perform the create element.

I would encourage you not to use React and DataTables for the same table, since if two different libraries are trying to control the same DOM elements, inevitably there is going to be some conflict.

Allan

dan@19ideas.com

Switching from table to editor instance made it work! It only happens when you change the value too. This also worked on the pop up "when you click new, and edit"! thanks!

As far as react goes, you don't have to worry about it. All it does is it encapsulates the DOM and virtualizes it. So if you put all your jquery code in "componentDidMount" you're fine.

This is analogous to wrapping it up in angular directives, but in my opinion, this is way better structured.

Anyways thanks for your help!

allan

Sounds good. I really must find some time to check React out a bit more!

Good to hear it is fixed now.

Allan