Editor (bubble) + Keytable: bubble appearing off screen when enter key event used to trigger edit.

morrbo

Hi there,

I'm listening for the enter key in order to create a bubble editor on certain fields. I need to do this as the enter key triggers different actions on different fields.

With the below code:

          dTable.on('key', function(e, datatable, key, cell) {
          if (key === 13) {
            const cellNode = cell.node();
            if (cellNode.classList.contains('dt-actions-cell')) {
              // my custom actions
            } else if (cellNode.classList.contains('control')) {
            // this is to open the responsive child rows so can just trigger the click manually
              cellNode.click();
            } else {
              editor.bubble(cell);
            }
          }
        });

If that last else is hit, the bubble will appear to the bottom left of the screen - i.e. it doesn't recieve any positioning. I guess the positioning must be based off the click location - if i use cellNode.click() there, the bubble will appear in the correct place.

I have tried using cellNode.click() (and then using preventDefault & stopProgagation) in lieu of using editor.bubble(cell), but for some reason this results in the editor submit event being fired as the bubble loads. I'm really not sure why this happens, but it results in the bubble opening and closing straight away.

I have tried using editor.bubblePosition() to position the bubble after it loads, but that doesn't work either.

Any suggestions?

Thanks very much

allan

Try passing in cellNode. If that doesn't work, could you give me a link to the page?

Allan

morrbo

That positions the window appropriately, but it has a similar result to the .click(), whereby the submit event fires, causing the window to close straight away.

All my code is local at the moment unfortunately - I don't suppose you have an instance where the editor is hosted on the internet?

Thanks for your reply.

morrbo

I think I have fixed it by catching the initial event to close it. Bit hacky but it works!

  dTable.on('key', function(e, datatable, key, cell) {
  if (key === 13) {
    const cellNode = cell.node();
    if (cellNode.classList.contains('dt-actions-cell')) {
      // my custom actions
    } else if (cellNode.classList.contains('control')) {
    // this is to open the responsive child rows so can just trigger the click manually
      cellNode.click();
    } else {
              editor.bubble(cell);
                e.preventDefault();
                e.stopPropagation();
                manageUserFuncs.stopCloseBubble = true;
                editor.one('preClose', function() {
                  if (manageUserFuncs.stopCloseBubble) {
                    manageUserFuncs.stopCloseBubble = false;
                    return false;
                  }
                });
    }
  }
});

morrbo

To anyone else coming across this, that fix ended up being really messy and not working properly. I've managed to get it working with some other changes, not entirely sure which in particular fixed it (and have spent all day on this so not too keen on figuring it out precisely!).

In any case, firstly make sure that you use:

          table.keys.disable();

on the 'open' event and

          table.keys.enable();

on the 'close' event.

Then, make sure in your bubble options you set submit: 'changed', focus: null. (I think the root cause of the issue is the focus event triggering a return for some reason.) In the open event, then add:

          setTimeout(() => {
            document.querySelector('div.DTE_Bubble_Table input').focus();
          }, 300);

Which will focus the field for you (provided it's an input field). Interestingly, if you set the timeout to just 100ms, sometimes this issue happens, sometimes it doesn't - which suggests a race condition of sorts.

Hope this helps someone in future.

Cheers