use a tag instead of abbr tag for search-choice-close

fixes #495
harvesthq · Oct 15, 2016 · 1eec4b1 · 1eec4b1
1 parent f2fe103
commit 1eec4b1
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 12 deletions.
diff --git a/coffee/chosen.jquery.coffee b/coffee/chosen.jquery.coffee
@@ -143,7 +143,8 @@ class Chosen extends AbstractChosen
         this.activate_field()
 
   container_mouseup: (evt) ->
-    this.results_reset(evt) if evt.target.nodeName is "ABBR" and not @is_disabled
+    if not @is_disabled and @allow_single_deselect and $(evt.target).hasClass('search-choice-close')
+      this.results_reset(evt)
 
   search_results_mousewheel: (evt) ->
     delta = evt.originalEvent.deltaY or -evt.originalEvent.wheelDelta or evt.originalEvent.detail if evt.originalEvent
@@ -331,7 +332,7 @@ class Chosen extends AbstractChosen
 
   results_reset_cleanup: ->
     @current_selectedIndex = @form_field.selectedIndex
-    @selected_item.find("abbr").remove()
+    @selected_item.find('.search-choice-close').remove()
 
   result_select: (evt) ->
     if @result_highlight
@@ -402,8 +403,9 @@ class Chosen extends AbstractChosen
 
   single_deselect_control_build: ->
     return unless @allow_single_deselect
-    @selected_item.find("span").first().after "<abbr class=\"search-choice-close\"></abbr>" unless @selected_item.find("abbr").length
-    @selected_item.addClass("chosen-single-with-deselect")
+    unless @selected_item.find('.search-choice-close').length
+      @selected_item.find('span').first().after '<a class="search-choice-close"></a>'
+    @selected_item.addClass('chosen-single-with-deselect')
 
   get_search_field_value: ->
     @search_field.val()

diff --git a/coffee/chosen.proto.coffee b/coffee/chosen.proto.coffee
@@ -98,7 +98,7 @@ class @Chosen extends AbstractChosen
 
     if @is_multiple
       @search_choices.stopObserving()
-      @container.select(".search-choice-close").each (choice) ->
+      @container.select('.search-choice-close').each (choice) ->
         choice.stopObserving()
     else
       @selected_item.stopObserving()
@@ -322,7 +322,7 @@ class @Chosen extends AbstractChosen
 
   results_reset_cleanup: ->
     @current_selectedIndex = @form_field.selectedIndex
-    deselect_trigger = @selected_item.down("abbr")
+    deselect_trigger = @selected_item.down('.search-choice-close')
     deselect_trigger.remove() if(deselect_trigger)
 
   result_select: (evt) ->
@@ -392,8 +392,9 @@ class @Chosen extends AbstractChosen
 
   single_deselect_control_build: ->
     return unless @allow_single_deselect
-    @selected_item.down("span").insert { after: "<abbr class=\"search-choice-close\"></abbr>" } unless @selected_item.down("abbr")
-    @selected_item.addClassName("chosen-single-with-deselect")
+    unless @selected_item.down('.search-choice-close')
+      @selected_item.down('span').insert { after: '<a class="search-choice-close"></a>' }
+    @selected_item.addClassName('chosen-single-with-deselect')
 
   get_search_field_value: ->
     @search_field.value

diff --git a/sass/chosen.scss b/sass/chosen.scss
@@ -79,7 +79,7 @@ $chosen-sprite-retina: url('chosen-sprite@2x.png') !default;
   .chosen-single-with-deselect span {
     margin-right: 38px;
   }
-  .chosen-single abbr {
+  .chosen-single .search-choice-close {
     position: absolute;
     top: 6px;
     right: 26px;
@@ -92,7 +92,7 @@ $chosen-sprite-retina: url('chosen-sprite@2x.png') !default;
       background-position: -42px -10px;
     }
   }
-  &.chosen-disabled .chosen-single abbr:hover {
+  &.chosen-disabled .chosen-single .search-choice-close:hover {
     background-position: -42px -10px;
   }
   .chosen-single div {
@@ -355,7 +355,7 @@ $chosen-sprite-retina: url('chosen-sprite@2x.png') !default;
     right: auto;
     left: 3px;
   }
-  .chosen-single abbr {
+  .chosen-single .search-choice-close {
     right: auto;
     left: 26px;
   }
@@ -410,7 +410,7 @@ $chosen-sprite-retina: url('chosen-sprite@2x.png') !default;
 /* @group Retina compatibility */
 @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 1.5dppx) {
   .chosen-rtl .chosen-search input[type="text"],
-  .chosen-container-single .chosen-single abbr,
+  .chosen-container-single .chosen-single .search-choice-close,
   .chosen-container-single .chosen-single div b,
   .chosen-container-single .chosen-search input[type="text"],
   .chosen-container-multi .chosen-choices .search-choice .search-choice-close,