Remove clip property by moving chosen-single’s search input.

[adunkman]

@harvesthq/chosen-developers to fix #2816, replaces #2780.

This PR removes the deprecated clip property by replacing it with display: none and display: block, just as @bingxie did in #2780 — however, this PR also moves the search input when using a single-select chosen to fix focus issues.

The core issue is that we were relying on the search input to catch keyboard events (including tabbing to the field), and that for single-select chosen instances, the search input was inside of the results drop that is hidden when you’re tabbing to the field.

When using left: -9999px, the element was still technically visible (although it wasn’t) so it could catch keyboard events. When using clip: rect(0,0,0,0), it was also still technically visible (although it wasn’t).

For single-select chosen instances:

• On initial render, the search input is rendered outside the results drop, over the selected option area. It’s set to opacity: 0 via CSS so it can receive keyboard events, but not adjust the design.
• On results show, the search input is inserted into the results drop. Since elements can only exist in one place in the DOM at a time, it’s automatically removed from the previous location. The opacity: 0 CSS rule no longer applies.
• On results hide, the search input is inserted back into the selected option area, which automatically removes it from the results drop. The opacity: 0 CSS rule applies once more.

/cc @Mateuspv as the original issue reporter

---

It looks like CI is failing to run tests because it can’t load jQuery — I checked for a quick fix but we may need to stop relying on a CDN for build stability. I’ll confirm that this is not just an issue with this PR, and then open up a new PR to fix the build. Until then, you can run the tests locally to confirm, if you’d like.

[adunkman]

As an aside, I originally went with two inputs — a new one to catch the focus events when the results drop was closed, and the existing search input — however, it quickly became ridiculous because letters typed into the focus input cause the results drop to filter and show at the same time. This meant that I had to forward events that caused letters to be typed into the focus input over to the search input… and simulating keyboard events is gross.

Using a single input that moves ended up being significantly easier.

[adunkman]

Confirmed that the broken build is the same on a fresh branch from master: https://travis-ci.org/harvesthq/chosen/builds/330842693

[adunkman]

Rebased to master after #2940 to fix build.

[braddunbar]

Seems like a good approach to me! I'm in! 👍

[taichunmin]

There are still one clip:
https://github.com/harvesthq/chosen/blob/master/sass/chosen.scss#L146