diff --git a/coffee/chosen.jquery.coffee b/coffee/chosen.jquery.coffee index 5f441137790..ca7558f84ae 100644 --- 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 @@ -299,7 +300,7 @@ class Chosen extends AbstractChosen if item.disabled choice.addClass 'search-choice-disabled' else - close_link = $('', { class: 'search-choice-close', 'data-option-array-index': item.array_index }) + close_link = $('' + @selected_item.addClass('chosen-single-with-deselect') get_search_field_value: -> @search_field.val() @@ -451,7 +453,7 @@ class Chosen extends AbstractChosen keydown_backstroke: -> if @pending_backstroke - this.choice_destroy @pending_backstroke.find("a").first() + this.choice_destroy @pending_backstroke.find('.search-choice-close').first() this.clear_backstroke() else next_available_destroy = @search_container.siblings("li.search-choice").last() diff --git a/coffee/chosen.proto.coffee b/coffee/chosen.proto.coffee index e9c19fac7ba..0bcfd89f841 100644 --- 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() @@ -290,7 +290,7 @@ class @Chosen extends AbstractChosen if item.disabled choice.addClassName 'search-choice-disabled' else - close_link = new Element('a', { href: '#', class: 'search-choice-close', rel: item.array_index }) + close_link = new Element('button', { type: 'button', tabindex: -1, class: 'search-choice-close', rel: item.array_index }) close_link.observe "click", (evt) => this.choice_destroy_link_click(evt) choice.insert close_link @@ -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: "" } 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: '' } + @selected_item.addClassName('chosen-single-with-deselect') get_search_field_value: -> @search_field.value @@ -445,7 +446,7 @@ class @Chosen extends AbstractChosen keydown_backstroke: -> if @pending_backstroke - this.choice_destroy @pending_backstroke.down("a") + this.choice_destroy @pending_backstroke.down(".search-choice-close") this.clear_backstroke() else next_available_destroy = @search_container.siblings().last() diff --git a/sass/chosen.scss b/sass/chosen.scss index 9131cb6b2a3..d558bd895e0 100644 --- a/sass/chosen.scss +++ b/sass/chosen.scss @@ -29,7 +29,8 @@ $chosen-sprite-retina: url('chosen-sprite@2x.png') !default; cursor: pointer; } - .search-choice, .chosen-single{ + .search-choice, + .chosen-single{ .group-name{ margin-right: 4px; overflow: hidden; @@ -44,6 +45,21 @@ $chosen-sprite-retina: url('chosen-sprite@2x.png') !default; } } } + .search-choice-close { + border: none; + cursor: pointer; + background: none; + display: block; + width: 12px; + height: 12px; + background: $chosen-sprite -42px 1px no-repeat; + font-size: 1px; + + &:hover, + &:focus { + background-position: -42px -10px; + } + } } /* @end */ @@ -79,21 +95,10 @@ $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; - display: block; - width: 12px; - height: 12px; - background: $chosen-sprite -42px 1px no-repeat; - font-size: 1px; - &:hover { - background-position: -42px -10px; - } - } - &.chosen-disabled .chosen-single abbr:hover { - background-position: -42px -10px; } .chosen-single div { position: absolute; @@ -253,14 +258,6 @@ $chosen-sprite-retina: url('chosen-sprite@2x.png') !default; position: absolute; top: 4px; right: 3px; - display: block; - width: 12px; - height: 12px; - background: $chosen-sprite -42px 1px no-repeat; - font-size: 1px; - &:hover { - background-position: -42px -10px; - } } } &.search-choice-disabled { @@ -330,8 +327,14 @@ $chosen-sprite-retina: url('chosen-sprite@2x.png') !default; .chosen-single { cursor: default; } - .chosen-choices .search-choice .search-choice-close { + .search-choice-close { cursor: default; + &:hover, + &:focus { + outline: none; + background-position: -42px 1px; + cursor: default; + } } } /* @end */ @@ -355,7 +358,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,10 +413,9 @@ $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 div b, .chosen-container-single .chosen-search input[type="text"], - .chosen-container-multi .chosen-choices .search-choice .search-choice-close, + .chosen-container .search-choice-close, .chosen-container .chosen-results-scroll-down span, .chosen-container .chosen-results-scroll-up span { background-image: $chosen-sprite-retina !important;