Move chosen-single’s search input to avoid clip.

We need not rely on clip: rect() if we move the input — we can instead use display: block/none.

Author: adunkman

coffee/chosen.jquery.coffee

@@ -243,6 +243,9 @@ class Chosen extends AbstractChosen
       @form_field_jq.trigger("chosen:maxselected", {chosen: this})
       return false
 
+    unless @is_multiple
+      @search_container.append @search_field
+
     @container.addClass "chosen-with-drop"
     @results_showing = true
 
@@ -259,6 +262,10 @@ class Chosen extends AbstractChosen
     if @results_showing
       this.result_clear_highlight()
 
+      unless @is_multiple
+        @selected_item.prepend @search_field
+        @search_field.focus()
+
       @container.removeClass "chosen-with-drop"
       @form_field_jq.trigger("chosen:hiding_dropdown", {chosen: this})
 

coffee/chosen.proto.coffee

@@ -235,6 +235,9 @@ class @Chosen extends AbstractChosen
       @form_field.fire("chosen:maxselected", {chosen: this})
       return false
 
+    unless @is_multiple
+      @search_container.insert @search_field
+
     @container.addClassName "chosen-with-drop"
     @results_showing = true
 
@@ -251,6 +254,10 @@ class @Chosen extends AbstractChosen
     if @results_showing
       this.result_clear_highlight()
 
+      unless @is_multiple
+        @selected_item.insert top: @search_field
+        @search_field.focus()
+
       @container.removeClassName "chosen-with-drop"
       @form_field.fire("chosen:hiding_dropdown", {chosen: this})
 

coffee/lib/abstract-chosen.coffee

@@ -332,12 +332,12 @@ class AbstractChosen
   get_single_html: ->
     """
       <a class="chosen-single chosen-default">
+        <input class="chosen-search-input" type="text" autocomplete="off" />
         <span>#{@default_text}</span>
         <div><b></b></div>
       </a>
       <div class="chosen-drop">
         <div class="chosen-search">
-          <input class="chosen-search-input" type="text" autocomplete="off" />
         </div>
         <ul class="chosen-results"></ul>
       </div>

sass/chosen.scss

@@ -20,10 +20,10 @@ $chosen-sprite-retina: url('[email protected]') !default;
     border-top: 0;
     background: #fff;
     box-shadow: 0 4px 5px rgba(#000,.15);
-    clip: rect(0,0,0,0);
+    display: none;
   }
   &.chosen-with-drop .chosen-drop {
-    clip: auto;
+    display: block;
   }
   a{
     cursor: pointer;
@@ -65,6 +65,12 @@ $chosen-sprite-retina: url('[email protected]') !default;
     text-decoration: none;
     white-space: nowrap;
     line-height: 24px;
+
+    input[type="text"] {
+      cursor: pointer;
+      opacity: 0;
+      position: absolute;
+    }
   }
   .chosen-default {
     color: #999;