Autogrow buggy with some characters like '@', '.'

[apneadiving]

In order to create a new entry (like email), I need periods to be printed (obviously). Everything is fine in chrome but not in firefox unless I add:

|| keyCode === 190

here: https://github.com/brianreavis/selectize.js/blob/master/dist/js/standalone/selectize.js#L1018

I can't reproduce it in a plnkr so I guess a script of mine could interfere but still, it feels wrong: how come the printable is that limited.

I guess its not a bug but does it ring a bell please?

[gojohnnygo]

@apneadiving Thanks for find this! I was having the same issue, but I didn't see a PR from you. Do you plan on submitting one? If not, I can do it. Let me know.

[joallard]

@gojohnnygo OP says he couldn't reproduce it in a demo, do you experience the bug in a simple use case? I'd like to get to the bottom of this before we just start throwing patches at the code. I'll admit those lines after printable = are puzzling.

[ellisio]

I'm running into this issue as well on a VueJS application that I'm working on. However, testing a Code Pin using the same code doesn't result in this error in Firefox... The periods work... I feel like it's another library being included.

http://codepen.io/ellisthedev/pen/RrpVBp

I'll keep poking and prodding until I find out what is the cause.

[ellisio]

This is not related to just the period key. Any special character -=[];',./ will fail in Firefox in this condition... Debugging further. I don't think it is related to the printable stuff OP mentions though.

[ellisio]

From what I can see, this is the issue:

https://github.com/brianreavis/selectize.js/blob/master/dist/js/standalone/selectize.js#L1011

In Chrome, the keydown event has an empty value. On keyup the value contains the period ..
In Firefox, the keydown event has an empty value. On keyup the value is also empty.

Implementing what the OP recommends does fix it; but it is a hack. This is forcing the measureString method to inject the period on the keyup event.

I feel like this may be an issue with Firefox itself and not Selectize. But for now, my recommendation is to add the following keycodes:

• 192: `
• 173: -
• 61: =
• 219: [
• 221: ]
• 59: ;
• 222: ' (Single Quote)
• 188: ,
• 190: .
• 191: /

You will also want to add this line after line 1009:

if (String.fromCharCode(e.keyCode) === delimiter) return;

Then you will want to add the delimiter argument to the autoGrow method.

That's my fix, and how I'm getting around this locally. Any other thoughts?

[joallard]

Good work. However I don't think it's autoGrow's job to know what's a delimiter. Ideally hitting the delimiter shouldn't trigger autogrow.

[ellisio]

Well, autoGrow is binding the update method to the $input on the four events. If you want to abstract the delimiter check out of the autoGrow method you might want to refactor and change autoGrow to contain the contents of the private update method and bind to $input in the setup block.

Just my thoughts though; hopefully this helps produce a fix :)

[ellisio]

Wait a sec, the line I recommended adding does not work for the back tick character. That String.fromCharCode() method returns special characters for all of those keys. Derp.

[joallard]

:markdown
`` ` ``

;)

[joallard]

#979 points out @ makes autogrow jerky also.

[joallard]

@johnsenpeder points out in #977 on using keydown:

There is a graphical bug atm with the autoGrow function where if you type a character not triggering the printable var to be true the input field will not be resized correctly at first, which makes the text "drag" to the left for a quick moment.
autogrow graphical bug

Also due to using keydown the character string will not have the correct character pressed (depending on keyboard language etc, like when adding @ on a keyboard that requires you to press alt gr + 2 the character would be 2 instead of @).