From 1eec4b1754f0839e2b8d8d9aa3fb88e98cd0fd8b Mon Sep 17 00:00:00 2001 From: Koen Punt Date: Sat, 15 Oct 2016 16:35:02 +0200 Subject: [PATCH 1/5] use a tag instead of abbr tag for search-choice-close fixes #495 --- coffee/chosen.jquery.coffee | 10 ++++++---- coffee/chosen.proto.coffee | 9 +++++---- sass/chosen.scss | 8 ++++---- 3 files changed, 15 insertions(+), 12 deletions(-) diff --git a/coffee/chosen.jquery.coffee b/coffee/chosen.jquery.coffee index 5f441137790..395c60c798a 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 @@ -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 "" 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 '' + @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 index e9c19fac7ba..1e89320f424 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() @@ -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 diff --git a/sass/chosen.scss b/sass/chosen.scss index 9131cb6b2a3..30b97a29591 100644 --- 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, From 8d1d5033c7eaf40a48c9012015ed747da792076f Mon Sep 17 00:00:00 2001 From: Koen Punt Date: Wed, 19 Oct 2016 00:41:23 +0200 Subject: [PATCH 2/5] target correct element for backspace delete --- coffee/chosen.jquery.coffee | 2 +- coffee/chosen.proto.coffee | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/coffee/chosen.jquery.coffee b/coffee/chosen.jquery.coffee index 395c60c798a..d07b6dd6831 100644 --- a/coffee/chosen.jquery.coffee +++ b/coffee/chosen.jquery.coffee @@ -453,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 1e89320f424..362df13e314 100644 --- a/coffee/chosen.proto.coffee +++ b/coffee/chosen.proto.coffee @@ -446,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() From 80569d596d3eeefcc289b3f51d5c5297a24ee151 Mon Sep 17 00:00:00 2001 From: Koen Punt Date: Wed, 19 Oct 2016 00:41:52 +0200 Subject: [PATCH 3/5] make close link a button --- coffee/chosen.jquery.coffee | 4 ++-- coffee/chosen.proto.coffee | 4 ++-- sass/chosen.scss | 45 ++++++++++++++++++++----------------- 3 files changed, 28 insertions(+), 25 deletions(-) diff --git a/coffee/chosen.jquery.coffee b/coffee/chosen.jquery.coffee index d07b6dd6831..8a0165513f0 100644 --- a/coffee/chosen.jquery.coffee +++ b/coffee/chosen.jquery.coffee @@ -300,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: -> diff --git a/coffee/chosen.proto.coffee b/coffee/chosen.proto.coffee index 362df13e314..9b3ddc448ca 100644 --- a/coffee/chosen.proto.coffee +++ b/coffee/chosen.proto.coffee @@ -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', class: 'search-choice-close', rel: item.array_index }) close_link.observe "click", (evt) => this.choice_destroy_link_click(evt) choice.insert close_link @@ -393,7 +393,7 @@ class @Chosen extends AbstractChosen single_deselect_control_build: -> return unless @allow_single_deselect unless @selected_item.down('.search-choice-close') - @selected_item.down('span').insert { after: '' } + @selected_item.down('span').insert { after: '' } @selected_item.addClassName('chosen-single-with-deselect') get_search_field_value: -> diff --git a/sass/chosen.scss b/sass/chosen.scss index 30b97a29591..718a12a4326 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 */ @@ -83,17 +99,6 @@ $chosen-sprite-retina: url('chosen-sprite@2x.png') !default; 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 .search-choice-close: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 */ From 2b4e53096bb02fb9549ec4696358a9884da33491 Mon Sep 17 00:00:00 2001 From: Koen Punt Date: Wed, 19 Oct 2016 00:43:18 +0200 Subject: [PATCH 4/5] prevent focus of close icon when Chosen is disabled --- coffee/chosen.jquery.coffee | 4 ++-- coffee/chosen.proto.coffee | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/coffee/chosen.jquery.coffee b/coffee/chosen.jquery.coffee index 8a0165513f0..ca7558f84ae 100644 --- a/coffee/chosen.jquery.coffee +++ b/coffee/chosen.jquery.coffee @@ -300,7 +300,7 @@ class Chosen extends AbstractChosen if item.disabled choice.addClass 'search-choice-disabled' else - close_link = $('' + @selected_item.find('span').first().after '' @selected_item.addClass('chosen-single-with-deselect') get_search_field_value: -> diff --git a/coffee/chosen.proto.coffee b/coffee/chosen.proto.coffee index 9b3ddc448ca..0bcfd89f841 100644 --- a/coffee/chosen.proto.coffee +++ b/coffee/chosen.proto.coffee @@ -290,7 +290,7 @@ class @Chosen extends AbstractChosen if item.disabled choice.addClassName 'search-choice-disabled' else - close_link = new Element('button', { type: 'button', 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 @@ -393,7 +393,7 @@ class @Chosen extends AbstractChosen single_deselect_control_build: -> return unless @allow_single_deselect unless @selected_item.down('.search-choice-close') - @selected_item.down('span').insert { after: '' } + @selected_item.down('span').insert { after: '' } @selected_item.addClassName('chosen-single-with-deselect') get_search_field_value: -> From b54f6829a3c8ed234339732092d4a4d3dbfadd0c Mon Sep 17 00:00:00 2001 From: Koen Punt Date: Wed, 19 Oct 2016 00:50:51 +0200 Subject: [PATCH 5/5] replace overly explicit rules --- sass/chosen.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/sass/chosen.scss b/sass/chosen.scss index 718a12a4326..d558bd895e0 100644 --- a/sass/chosen.scss +++ b/sass/chosen.scss @@ -413,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 .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, + .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;