Crashing browser

[PINHOf]

Hello,

I have a form where I have multiple inputs, so the accept button cannot close my keyboard. The form is shown on a modal.

I prepared this https://jsfiddle.net/3cfyjhgw/3/ so you can see the problem. Try the following:

1. Insert several numbers
2. Click the button accept
3. Click the button clear
4. Enter again several numbers
5. Click various times in accept
6. Try to enter numbers again

Well done, you've now crashed the browser tab. I have tried on Chrome and Firefox and both have the problem.

At first I thought the problem might be due to the accepted event I was firing and also thought it was my code problem, but after a few tests I finally realize that the plugin was causing the issue.

Thanks.

EDIT 1: I tested again and actually it seems that it only needs to click several times on accept button to crash it..

[Mottie]

Hi @PINHOf!

Thanks for reporting this. It looks like an issue with the alwaysOpen code. I've been trying to work out a fix, but it isn't cooperating. I hope to have this solved soon.

[PINHOf]

Hey @Mottie,

I have run a few tests and find out that the problem is on this line:

base.$el.bind(o.openOn + base.namespace, function(){ base.focusOn(); });

Which is inside the base.close function.

Switching to:

base.el.bind(o.openOn + base.namespace, function(){ base.focusOn(); });

Removes the issue, but I dunno why you were using base.$el and not base.el.
You can try it with the change at https://jsfiddle.net/3cfyjhgw/4/

EDIT 1: Wrong JSFiddle link, this one is OK: https://jsfiddle.net/3cfyjhgw/5/

[Mottie]

base.$el is the the jQuery object of the input while base.el is the DOM element. Using base.el.bind is likely not doing anything... I did try skipping that bind, but the issue was trying to use the keyboard a second, or third time after using the accept key.

I know the problem is that the focusOn function is called in an infinite loop, I just had other distractions that I didn't get to finish working on a fix. I'll try again today.

[PINHOf]

You're right. The problem is on the function focusOn. After digging more of your code I found out that you have, from what I have understand, an "!" exclamation point where you don't need it.

Inside the $keyboard.caret function:

var start, end, txt, pos,
noFocus = $el.getkeyboard() && $el.getkeyboard().options.noFocus;

if (!noFocus) { $el.focus(); }

The variable noFocus returns false, which means that when it's false you want to focus the jQuery object. But in your code you are saying "when it's not false, focus", and "not false" means it's true, therefore you are constantly focusing the element causing it to crash.

The solution is just to remove the "!"
if (noFocus) { $el.focus(); }

Check this JSFiddle https://jsfiddle.net/3cfyjhgw/6/ and open the console to inspect.

Correct me if I'm wrong, but it seems right.

[Mottie]

Actually, noFocus is an option set by the developer. It means you want to interact with the input without giving it focus.

I ended up not using the .focusOn function when a keyboard is set to alwaysOpen.

Try out this updated demo.... note that when autoAccept is false, like it is in this demo, when you hover over the other keyboard, the input reverts to it's original value (since it was last accepted).