Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

correctly show/hide when used inside shadow DOM #3032

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions coffee/chosen.jquery.coffee
Original file line number Diff line number Diff line change
Expand Up @@ -106,7 +106,7 @@ class Chosen extends AbstractChosen
@container.on 'click.chosen', (evt) -> evt.preventDefault(); return # gobble click of anchor

destroy: ->
$(@container[0].ownerDocument).off 'click.chosen', @click_test_action
$(if @container[0].getRootNode? then @container[0].getRootNode() else @container[0].ownerDocument).off 'click.chosen', @click_test_action
@form_field_label.off 'click.chosen' if @form_field_label.length > 0

if @search_field[0].tabIndex
Expand Down Expand Up @@ -139,7 +139,7 @@ class Chosen extends AbstractChosen
if not (evt? and ($ evt.target).hasClass "search-choice-close")
if not @active_field
@search_field.val "" if @is_multiple
$(@container[0].ownerDocument).on 'click.chosen', @click_test_action
$(if @container[0].getRootNode? then @container[0].getRootNode() else @container[0].ownerDocument).on 'click.chosen', @click_test_action
this.results_show()
else if not @is_multiple and evt and (($(evt.target)[0] == @selected_item[0]) || $(evt.target).parents("a.chosen-single").length)
evt.preventDefault()
Expand All @@ -161,7 +161,7 @@ class Chosen extends AbstractChosen
this.close_field() if not @active_field and @container.hasClass "chosen-container-active"

close_field: ->
$(@container[0].ownerDocument).off "click.chosen", @click_test_action
$(if @container[0].getRootNode? then @container[0].getRootNode() else @container[0].ownerDocument).off "click.chosen", @click_test_action

@active_field = false
this.results_hide()
Expand Down
61 changes: 35 additions & 26 deletions coffee/chosen.proto.coffee
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ class @Chosen extends AbstractChosen
this.set_label_behavior()

on_ready: ->
@form_field.fire("chosen:ready", {chosen: this})
@form_field.fire("chosen:ready", { chosen: this })

register_observers: ->
@container.observe "touchstart", (evt) => this.container_mousedown(evt)
Expand Down Expand Up @@ -85,7 +85,10 @@ class @Chosen extends AbstractChosen
@container.observe "click", (evt) => evt.preventDefault() # gobble click of anchor

destroy: ->
@container.ownerDocument.stopObserving "click", @click_test_action
if (@container.getRootNode?)
@container.getRootNode().stopObserving "click", @click_test_action
else
@container.ownerDocument.stopObserving "click", @click_test_action

for event in ['chosen:updated', 'chosen:activate', 'chosen:open', 'chosen:close']
@form_field.stopObserving(event)
Expand Down Expand Up @@ -135,7 +138,10 @@ class @Chosen extends AbstractChosen
if not (evt? and evt.target.hasClassName "search-choice-close")
if not @active_field
@search_field.clear() if @is_multiple
@container.ownerDocument.observe "click", @click_test_action
if (@container.getRootNode?)
@container.getRootNode().observe "click", @click_test_action
else
@container.ownerDocument.observe "click", @click_test_action
this.results_show()
else if not @is_multiple and evt and (evt.target is @selected_item || evt.target.up("a.chosen-single"))
this.results_toggle()
Expand All @@ -156,7 +162,10 @@ class @Chosen extends AbstractChosen
this.close_field() if not @active_field and @container.hasClassName("chosen-container-active")

close_field: ->
@container.ownerDocument.stopObserving "click", @click_test_action
if (@container.getRootNode?)
@container.getRootNode().stopObserving "click", @click_test_action
else
@container.ownerDocument.stopObserving "click", @click_test_action

@active_field = false
this.results_hide()
Expand Down Expand Up @@ -200,7 +209,7 @@ class @Chosen extends AbstractChosen
@search_field.readOnly = false
@container.removeClassName "chosen-container-single-nosearch"

this.update_results_content this.results_option_build({first:true})
this.update_results_content this.results_option_build({ first: true })

this.search_field_disabled()
this.show_search_field_default()
Expand All @@ -209,30 +218,30 @@ class @Chosen extends AbstractChosen
@parsing = false

result_do_highlight: (el) ->
this.result_clear_highlight()
this.result_clear_highlight()

@result_highlight = el
@result_highlight.addClassName "highlighted"
@result_highlight = el
@result_highlight.addClassName "highlighted"

maxHeight = parseInt @search_results.getStyle('maxHeight'), 10
visible_top = @search_results.scrollTop
visible_bottom = maxHeight + visible_top
maxHeight = parseInt @search_results.getStyle('maxHeight'), 10
visible_top = @search_results.scrollTop
visible_bottom = maxHeight + visible_top

high_top = @result_highlight.positionedOffset().top
high_bottom = high_top + @result_highlight.getHeight()
high_top = @result_highlight.positionedOffset().top
high_bottom = high_top + @result_highlight.getHeight()

if high_bottom >= visible_bottom
@search_results.scrollTop = if (high_bottom - maxHeight) > 0 then (high_bottom - maxHeight) else 0
else if high_top < visible_top
@search_results.scrollTop = high_top
if high_bottom >= visible_bottom
@search_results.scrollTop = if (high_bottom - maxHeight) > 0 then (high_bottom - maxHeight) else 0
else if high_top < visible_top
@search_results.scrollTop = high_top

result_clear_highlight: ->
@result_highlight.removeClassName('highlighted') if @result_highlight
@result_highlight = null

results_show: ->
if @is_multiple and @max_selected_options <= this.choices_count()
@form_field.fire("chosen:maxselected", {chosen: this})
@form_field.fire("chosen:maxselected", { chosen: this })
return false

@container.addClassName "chosen-with-drop"
Expand All @@ -242,7 +251,7 @@ class @Chosen extends AbstractChosen
@search_field.value = this.get_search_field_value()

this.winnow_results()
@form_field.fire("chosen:showing_dropdown", {chosen: this})
@form_field.fire("chosen:showing_dropdown", { chosen: this })

update_results_content: (content) ->
@search_results.update content
Expand All @@ -252,7 +261,7 @@ class @Chosen extends AbstractChosen
this.result_clear_highlight()

@container.removeClassName "chosen-with-drop"
@form_field.fire("chosen:hiding_dropdown", {chosen: this})
@form_field.fire("chosen:hiding_dropdown", { chosen: this })

@results_showing = false

Expand Down Expand Up @@ -288,7 +297,7 @@ class @Chosen extends AbstractChosen

search_results_mouseover: (evt) ->
target = if evt.target.hasClassName("active-result") then evt.target else evt.target.up(".active-result")
this.result_do_highlight( target ) if target
this.result_do_highlight(target) if target

search_results_mouseout: (evt) ->
this.result_clear_highlight() if evt.target.hasClassName('active-result') or evt.target.up('.active-result')
Expand Down Expand Up @@ -343,7 +352,7 @@ class @Chosen extends AbstractChosen
this.result_clear_highlight()

if @is_multiple and @max_selected_options <= this.choices_count()
@form_field.fire("chosen:maxselected", {chosen: this})
@form_field.fire("chosen:maxselected", { chosen: this })
return false

if @is_multiple
Expand All @@ -353,7 +362,7 @@ class @Chosen extends AbstractChosen

high.addClassName("result-selected")

item = @results_data[ high.getAttribute("data-option-array-index") ]
item = @results_data[high.getAttribute("data-option-array-index")]
item.selected = true

@form_field.options[item.options_index].selected = true
Expand Down Expand Up @@ -381,7 +390,7 @@ class @Chosen extends AbstractChosen

this.search_field_scale()

single_set_selected_text: (text=@default_text) ->
single_set_selected_text: (text = @default_text) ->
if text is @default_text
@selected_item.addClassName("chosen-default")
else
Expand Down Expand Up @@ -433,7 +442,7 @@ class @Chosen extends AbstractChosen

no_results: (terms) ->
@search_results.insert this.get_no_results_html(terms)
@form_field.fire("chosen:no_results", {chosen: this})
@form_field.fire("chosen:no_results", { chosen: this })

no_results_clear: ->
nr = null
Expand Down Expand Up @@ -507,7 +516,7 @@ class @Chosen extends AbstractChosen

@search_field.setStyle(width: width + 'px')

trigger_form_field_change: ->
trigger_form_field_change: ->
triggerHtmlEvent @form_field, 'input'
triggerHtmlEvent @form_field, 'change'

Expand Down