Multi Select: .search-field input width does not fill width of .chosen-choices

[jordanstephens]

For Multiple Select, the width of .search-field input does not fill the width of the perceived input of .chosen-choices.

This is illustrated clearly in the following screenshot from the Chosen demo page at http://harvesthq.github.io/chosen/

This really becomes a problem when a user attempts to click inside the perceived input field after the field has been given focus. This actually causes the real input field to lose focus and potentially causes a lot of confusion for the user when clicking inside what looks like an input field doesn't actually give it focus.

It looks like there was a small mention of this issue in this thread (#407 (comment)), but it doesn't look like it was ever truly addressed.

Steps to reproduce:

1. Click inside chosen multi select form to open dropdown and give focus to the input field
2. Click the perceived input field near the right edge.
3. Try to type, realize the input doesn't actually have focus.

Possible Solutions

1. At first glance, it looks like a true solution would modify the inputs width depending on the width of .chosen-choices minus the width of any already selected values. We probably want to give the input some minimum width also, to prevent it from becoming confusingly narrow.
2. Alternatively, I guess you could just focus on the child input on any click events on .chosen-choices.

Is there any interest in merging a solution to this issue? I'd be happy to cook up a pull request with either of the above solutions.

[tjschuck]

What browser, browser version, OS, and OS version are you using?

[jordanstephens]

I'm pretty confident this issue manifests independent of browser/OS, but here's a few combinations with which I've reproduced it:

• OS X 10.9.1 Chrome 32.0.1700.77
• OS X 10.9.1 Safari 7.0.1 (9537.73.11)
• OS X 10.9.1 Firefox 26.0.0
• Windows 8 IE 10.0.9200.16384

[tjschuck]

@jordanstephens Okay, thanks for the report. The @harvesthq/chosen-developers are the final say, but pull requests are always welcome!

[jordanstephens]

Alright, I'll put something together.

[igmcdowell]

I'd love to see this merged in.

This is a fairly serious usability issue when trying to delete a previous selection. If you click on the perceived field outside of the text box, focus blurs. If you then press the delete key, it triggers the browser's back action (since the input doesn't have focus), potentially losing whatever other work you've done so far on the page. We saw this happen to one of our users during a recent round of usability testing.