Select input loses focus after selecting item

[sjhewitt]

When selectize applied to a select input, and a selection is made (with the keyboard or mouse,) the focus is lost. This makes it a pain to tab around the form, as after you select something the focus is set to the body element. Compare this with a native select input that keeps focus on the input after it has closed.

I've hacked together a bit of code that returns the focus to the input element, however it's not great. Perhaps the best way would be to insert an invisible element to take the focus after an item is selected?

[brianreavis]

This is a great point. Off the cuff, another option is to position the input offscreen in the blur() method and not actually have the input lose focus. Then on "focus", restore it to its proper location with position:relative. Not an awesome solution, it might be easier to maintain than adding/removing a separate element and managing its focus.

I'll try out some options tonight. If you happen to have a solution you like, I'd love to see it.

[sjhewitt]

yeah, I think moving it offscreen (or setting opacity=0) would be a good option. Rather than calling blur, you could just hide the input, while retaining focus. That way all the keyboard commands will continue to work without needing to forward them on from an extra invisible element.

I played around with having a separate hidden element, but it started becoming too hacky, too many workarounds and special case fixes.

[sjhewitt]

I created a version that retains focus and hides the input using opacity:
sjhewitt@7dc6fe1

[brianreavis]

Thanks man. Went ahead with the opacity trick :) There's also a fix in for retaining focus when the input fills up.

There's a slight edge case that needs to be addressed down the road. If the user selects an item that has a value of "" (empty), it should show the placeholder. Unfortunately, with the the input hidden, the placeholder will be hidden too. In order to fix this, there will have to be another input element. I'd prefer to address this later though when other things are more stable.