Control input retains placeholder width after placeholder is cleared

[adamlogic]

The control input width is initially set using the width of the placeholder text. This is expected, but once the control gets focus and the placeholder is cleared, the width should shrink. The consequence of this is that when the control input is too wide, it is pushed down to the next line.

Best explained with a gif:

Here is the CodePen used to produce this bug.

[adamlogic]

This is the line which prevents the control input from updating its width (growing) after the placeholder is cleared:

self.$control_input.data('grow', !isFull && !isLocked);

Removing that line fixes the bug for me. It was introduced in 95770a4 to "Allow caret movement when control is full". Caret movement seems to work fine for me without that line, so I'm not really sure of its purpose.

[brianreavis]

Issues that come with GIFs are the best. Makes it so easy to see what's going on!

The autogrowing is really proactive about adjusting the size of the textbox. It'll resize on keydown, before the typed character is even in the box. This is to prevent weird moving text – the space for the added character will be available before the browser goes to add the character. When Selectize is in multiple-select mode, disabling the growing is especially important. If it's full, and the caret's between items, items will shift around even though no characters end up in the textbox. That's why it's not safe to remove that line.

Just patched up the problem! Thanks man :)

[adamlogic]

Great! Thanks for the fix, and for the explanation.