Maximum call stack size exceeded Error

[bhumiradixweb]

Hello,

I am getting below error due to this line:

jquery.js:2 Uncaught RangeError: Maximum call stack size exceeded
   at RegExp.[Symbol.replace] (<anonymous>)
   at String.replace (native)
   at Function.gb.matchesSelector (file:///path/jquery.js:2:11900)
   at n.fn.init.closest (file:///path/jquery.js:2:25226)
   at a.keyboard.f.escClose [as origEscClose] (file:///path/jquery.js:42:2418)
   at a.keyboard.f.escClose [as origEscClose] (file:///path/jquery.js:42:2464)
   at a.keyboard.f.escClose [as origEscClose] (file:///path/jquery.js:42:2464)
   at a.keyboard.f.escClose [as origEscClose] (file:///path/jquery.js:42:2464)
   at a.keyboard.f.escClose [as origEscClose] (file://path/jquery.js:42:2464)
   at a.keyboard.f.escClose [as origEscClose] (file:///path/jquery.js:42:2464)

After few research I got that it is addAutocomplete error and due to this line:

.addAutocomplete({
		position : {
			of: '#test',
			my : 'left top',
			at : 'left bottom',
			collision: 'none none'
		}
	})

if i comment the autocomplete code, no error occurring. Can you please advice me to fix the issue?

Thanks

[Mottie]

Hi @bhumiradixweb!

I am not able to duplicate the above conditions... it is very difficult to troubleshoot this issue without a demo.

Please:

• Modify this demo to duplicate the error.
• Provide me with step-by-step directions on how to cause the error.
• Share which versions of the keyboard plugin, jQuery and jQuery UI you are using.

[bhumiradixweb]

I am using following versions:

jQuery: v2.1.3
jQuery UI: v1.11.4
Keyboard: v1.25.25
Keyboard Autocomplete: v1.11.2

I will try to duplicate the error on fiddle and let you know. Thanks

[bhumiradixweb]

Hello,

This line base.origEscClose(e); is generating error. This line is in autocomplete js file which is called on any click event means you click anywhere in the page , this will be fire.

But sometimes it goes into infinite loop.

You can check sample demo here (https://jsfiddle.net/n6xeoLyp/25/)

$(document).on('mousedown', 'body', function(){
        console.log('a');
        $('body').trigger('mousedown');
    });

This code added which generate error when you click on input field.

Thanks

[Mottie]

Oh, that's the problem. Is there a specific reason why a "mousedown" needs to be triggered on the same element? That code is creating an infinite loop.

I can fix this issue in the keyboard code, but it would still cause an error with other code (other than the keyboard) that binds to a "mousedown" event on the "body".

[bhumiradixweb]

Hello Mottie,

I am not using mouse down event but making a call on the server to download the file which leads to infinite call because :

base.origEscClose = base.escClose;
base.escClose = function(e) {
   base.origEscClose(e);
});

You have called function recurcisely which create infinite loop sometimes. For solution, i have changed close function call and working for me.

base.origEscClose = base.escClose;
base.escClose = function(e) {
   base.close('true');
});

Thanks

[Mottie]

Ahhh, I forgot I did that in the autocomplete extension.

[Mottie]

Please let me know if the fix in the master branch resolves this issue.

[bhumiradixweb]

No, this changes not solved the issue.

[Mottie]

I only updated the jquery.keyboard.js file. The autocomplete extension does need an update, but it isn't related to this issue.

[Mottie]

I don't think the stack error has been fixed... I still see it in my local demo, but the keyboard plugin should no longer be the source of that error.

[bhumiradixweb]

So, whatever changes i have applied is correct?

[Mottie]

No, what I'm saying is that the code to trigger a "mousedown" is causing the error.

You can see it in this demo:

• The keyboard plugin isn't even loaded, only jQuery.
• Clicking anywhere in the body will cause the "Maximum call stack size exceeded" error.

This is also not jQuery's fault, the code itself is causing the cyclical problem and needs to be modified; or a different method needs to be used:

One alternative is to use an undocumented jQuery event property - isTriggered (demo):

$(document).on('mousedown', 'body', function(event) {
	if (!event.isTrigger) {
    console.log('triggering a mousedown!');
    $('body').trigger('mousedown');
  }
});

It only allows user "mousedown" clicks to pass through and trigger a "mousedown" on the body.

[bhumiradixweb]

This code I have written to prove that is creating issue otherwise in my code, I have not written cyclic code, it is creating issue just when i set cron and continuous make a call for files.

[Mottie]

Hehe sorry, I didn't mean to sound harsh. I know you only wrote that code as an example.

Initially, I tried the modification you shared, but it didn't prevent the JS error... at least not the error with the cyclic code. Either way, that change would break the autoAccept functionality and a few others. I switched to debouncing the event, but I guess that didn't resolve the problem discussed here.

If this is still an issue, please provide an example closer to the situation you have to make it easier for me to troubleshoot. I'm not adept at server-side things (but I do know what a cron job is!), so I don't really know how to emulate the problem.

[bhumiradixweb]

Hello Mottie,

I have set a cron job to download the file which contains keyboard code. So you can open a browser and in the background, you can run cronjob and don't refresh the page( you can write an ajax call for new content) and check the keyboard again after your file downloaded from somewhere. This is exact scenario but there might be 1% chance that you can duplicate error.

If not, it is fine for now as I have changed the code in escClose() function :)

Thanks

[bhumiradixweb]

Also getting below warning which slows down my system of hang system:

[Violation] 'mousedown' handler took 2646ms
[Violation] Forced reflow while executing JavaScript took 168ms
jquery.js:3 [Violation] 'mouseup' handler took 420ms

and if add this change cb9c5a4#diff-651b2c157b3bf6ac6630c0c6e0da9879

getting below error:

[Violation] 'setTimeout' handler took 164ms
[Violation] Forced reflow while executing JavaScript took 31ms

Kindly check the solution. This keyboard thing hangs my system totally.

Thanks

[Mottie]

Hmm, I made the indicated change to prevent the stack size error you reported. Should I just restore the plugin to use the previous code? The error will again occur in the keyboard plugin, but then you won't get the performance issues...

I'm sorry I don't have an ideal solution for you. Do you have any ideas on how to fix it? The proposed change to the base.escClose function aren't ideal since it breaks a lot of features.

I wonder, if setting a flag would work better? - demo using the previous version

  // flag to prevent trigger issues
var flag = false;
$(document).on('mousedown', 'body', function(event) {
  if (!flag) {
    flag = true;
    $('body').trigger('mousedown');
    setTimeout(function() {
      flag = false;
    }, 1);
  }
});
$('#keyboard')
  .keyboard({
    autoAccept: true,
    userClosed: true
  })
  .autocomplete({
    source: availableTags
  })
  .addAutocomplete();

// change escClose function
var kb = $('#keyboard').getkeyboard(),
  orig = kb.escClose;
kb.escClose = function(event) {
  if (!flag) {
    orig(event);
  }
};

[bhumiradixweb]

Hello @Mottie

Here is the demo for generating error https://jsfiddle.net/n6xeoLyp/45/ can you please provide me solution?

[Mottie]

Hi again! Thanks for providing a demo of the problem!... it looks like it still involves the autocomplete plugin, so I'll try to spend some time on a solution for it soon.

[bhumiradixweb]

@Mottie

Any solution? Thanks

[Mottie]

Oh wow sorry! I've been super busy. I'll get this on my to-do list for today.

[Mottie]

This bug should finally be squashed! The error no longer occurs in this updated demo (using code from the master branch).

I plan on releasing a new version within a week.