Introducing CrudHunt:Open-source Full-stack CRUDs for Next.js by KeenThemes
Browse CrudHunt

webpack event attached to input with custom blur event callback


hello there,

While developing our software with keentheem, we have encountered an issue with webpack and a library keen imports automatically (datatables.net)
This library has a component which lets a user to edit a table cell like an excel (datatable-editor.js, basically it adds an input field wrapped by some datatable divs inside the td)

On one of the tables we have to implement, a cell needs to execute a function triggered when that element is blurred.
I did several tests, and already opened a thread on datatables’s forum about this.
With the help of one of the devs , I managed to find (hopefully) the difference causing the issue.
Unfortunately, it seems that due to a function webpack adds to that input element, my custom code is prevented from being executed on blur.
In one of these tests , I have manually removed any event from the input , and manually added the custom fn on blur back.
Still, webpack adds its own fn that prevents the execution.

Datatable.net provides a page where users can post their code as test cases.
Below link is my test case provided to them.
I don’t expect you to dig through all the code, but please notice that when you click on cell of column “Cod. Iva”, the event attached to the on-the-go created input is the blur that triggers the fn correctly on blur
http://live.datatables.net/gesifuqa/10/edit

Instead , in my original page this webpack function is being added automatically (see attached image, or tkeen theme demo1/dist/assets/plugins/global/plugins.bundle.js:80647 file)
This is the only difference from both cases.

Probably , I suppose the issue regards the $.isTrigger section.
Infact, in my local page when focus is on that input, if I click outside the form , the blur events is triggered correctly.
But if the focus is moved from one table row field to another (you can edit multiple cell in a row), the event is not triggered.
(Because datatable manages the closing (destruction) of current input / creation and opening of the new input automatically)

images of differences from test case and local page downloadable here:
<a>https://we.tl/t-h4ZER7CYH6</a>
(sorry, new to this forum don't know how to attach images here)


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (0)