Editor Inline Standalone: Field keeps in focus after this.submit()

fwtag

Hi there,

weird behaviour: In my standalone editor instance (hence NO DataTable attached), using the submit button implementation coming from this example, the field keeps in focus and does not close/blur itself. When I use the "Return" (or the "Esc" key, the behaviour is as expected.

I only use this.submit() to fire the edited field, but actually, I hook into the postEdit event to catch any changes and not to process ajax update. Which works with "Return" and "Esc".

Interestingly, even with this.close() as a cross check, the field keeps opened and in focus, but the value is set back to the value when I started editing.

Where is my mistake ...?

rf1234

Where is my mistake ...?

That is the question! And you are the only person to ever know because nobody else can see your code

Please, post a test case or - if that is not possible - link to a page showing the issue.

fwtag

Makes sense ... ;-)

let editor = new $.fn.dataTable.Editor({
    fields: fields,
    formOptions: {
        submit: 'allIfChanged'
    },
})

Where fields is basically not more than objects of name, label and type=text|textarea (parsed from a yaml file)

   $('[data-editor-field]').on('click', function (e) {
       $(this).addClass('editing')
       editor.inline(this, {
          buttons: {
              label: '>', fn: function () {
                  this.submit();
              }
          }
      });
 });

That's all. Any Event handling (like the postEdit event mentioned above) is commented out in the meantime to evaluate where the mistake is.

The only difference to the example mentioned above seems to be the missing ajax handling. But in this case, I (shall) hook into the postEdit event and store data locally for later batch processing after user action.

fwtag

Another strange behaviour I just discovered:
When I use the submit button (see above) together with an unchanged value, the editor field gets cleared with a white background. This happens also when hitting "RETURN" on the editor with unchanged value.

With changes in it, the submit process takes place, but the field keeps in focus and the editor keeps aktive.

allan

Can you give us a link to a test case? I don't immediately see anything wrong there.

Allan

fwtag

@allan Hard to do since it is a complex implementation with several microservices currently running only on my Docker@Mac.

Please note the additional hint I just added to my comment: "This happens also when hitting "RETURN" on the editor with unchanged value."

I have to investigate my code. For me, it seems as if there is anything wrong in the process queue or event handling.

fwtag

I just discovered that, obviously, this case relates to jQuery event handling. The button(s) lay above/inside the div tag which contains the inline editor. Clicking on the button fires an onClick event, which is handled through to the div layer, fires another onClick event there, which re-opens the editor.

Interestingly, using e.preventDefault() inside the button's closure does not stop event propagation ...

EDIT:
Using event.stopPropagation() inside the button's closure fixes this 'issue'. Yes, because it is a jQuery and no DOM event.