diff --git a/app/assets/javascripts/hw_combobox/models/combobox/events.js b/app/assets/javascripts/hw_combobox/models/combobox/events.js index b36046c..58ee805 100644 --- a/app/assets/javascripts/hw_combobox/models/combobox/events.js +++ b/app/assets/javascripts/hw_combobox/models/combobox/events.js @@ -2,17 +2,17 @@ import Combobox from "hw_combobox/models/combobox/base" import { dispatch } from "hw_combobox/helpers" Combobox.Events = Base => class extends Base { - _dispatchSelectionEvent({ isNewAndAllowed, previousValue }) { + _dispatchPreselectionEvent({ isNewAndAllowed, previousValue }) { if (previousValue === this._incomingFieldValueString) return - dispatch("hw-combobox:selection", { // TODO: rename to preselection + dispatch("hw-combobox:preselection", { target: this.element, detail: { ...this._eventableDetails, isNewAndAllowed, previousValue } }) } - _dispatchClosedEvent() { - dispatch("hw-combobox:closed", { // TODO: rename to selection + _dispatchSelectionEvent() { + dispatch("hw-combobox:selection", { target: this.element, detail: this._eventableDetails }) diff --git a/app/assets/javascripts/hw_combobox/models/combobox/selection.js b/app/assets/javascripts/hw_combobox/models/combobox/selection.js index 976f6d9..239793d 100644 --- a/app/assets/javascripts/hw_combobox/models/combobox/selection.js +++ b/app/assets/javascripts/hw_combobox/models/combobox/selection.js @@ -46,7 +46,7 @@ Combobox.Selection = Base => class extends Base { this._fieldValue = option.dataset.value this._markSelected(option) this._markValid() - this._dispatchSelectionEvent({ isNewAndAllowed: false, previousValue: previousValue }) + this._dispatchPreselectionEvent({ isNewAndAllowed: false, previousValue: previousValue }) option.scrollIntoView({ block: "nearest" }) } @@ -58,7 +58,7 @@ Combobox.Selection = Base => class extends Base { this._fieldValue = this._fullQuery this._fieldName = this.nameWhenNewValue this._markValid() - this._dispatchSelectionEvent({ isNewAndAllowed: true, previousValue: previousValue }) + this._dispatchPreselectionEvent({ isNewAndAllowed: true, previousValue: previousValue }) } _deselect() { @@ -76,7 +76,7 @@ Combobox.Selection = Base => class extends Base { _deselectAndNotify() { const previousValue = this._deselect() - this._dispatchSelectionEvent({ isNewAndAllowed: false, previousValue: previousValue }) + this._dispatchPreselectionEvent({ isNewAndAllowed: false, previousValue: previousValue }) } _selectIndex(index) { diff --git a/app/assets/javascripts/hw_combobox/models/combobox/toggle.js b/app/assets/javascripts/hw_combobox/models/combobox/toggle.js index 9a6d032..c554778 100644 --- a/app/assets/javascripts/hw_combobox/models/combobox/toggle.js +++ b/app/assets/javascripts/hw_combobox/models/combobox/toggle.js @@ -23,7 +23,7 @@ Combobox.Toggle = Base => class extends Base { this.expandedValue = false - this._dispatchClosedEvent() + this._dispatchSelectionEvent() if (inputType != "hw:keyHandler:escape") { this._createChip(shouldReopen) diff --git a/test/dummy/app/javascript/controllers/combobox/events_controller.js b/test/dummy/app/javascript/controllers/combobox/events_controller.js index 75dbd9c..5798d40 100644 --- a/test/dummy/app/javascript/controllers/combobox/events_controller.js +++ b/test/dummy/app/javascript/controllers/combobox/events_controller.js @@ -1,10 +1,17 @@ import { Controller } from "@hotwired/stimulus" export default class extends Controller { - static targets = [ "selectionScratchpad", "selectionCount", "closedScratchpad", "closedCount", "removalScratchpad", "removalCount" ] + static targets = [ "preselectionScratchpad", "preselectionCount", "selectionScratchpad", "selectionCount", "removalScratchpad", "removalCount" ] connect() { - this.selectionScratchpadTarget.innerText = "Ready to listen for hw-combobox events!" + this.preselectionScratchpadTarget.innerText = "Ready to listen for hw-combobox events!" + } + + showPreselection(event) { + this.preselectionCount ??= 0 + this.preselectionCount++ + this.preselectionScratchpadTarget.innerText = this.#template(event) + this.preselectionCountTarget.innerText = `preselections: ${this.preselectionCount}.` } showSelection(event) { @@ -14,13 +21,6 @@ export default class extends Controller { this.selectionCountTarget.innerText = `selections: ${this.selectionCount}.` } - showClosed(event) { - this.closedCount ??= 0 - this.closedCount++ - this.closedScratchpadTarget.innerText = this.#template(event) - this.closedCountTarget.innerText = `closings: ${this.closedCount}.` - } - showRemoval(event) { this.removalCount ??= 0 this.removalCount++ diff --git a/test/dummy/app/views/comboboxes/custom_events.html.erb b/test/dummy/app/views/comboboxes/custom_events.html.erb index 9855705..36ef0bf 100644 --- a/test/dummy/app/views/comboboxes/custom_events.html.erb +++ b/test/dummy/app/views/comboboxes/custom_events.html.erb @@ -4,17 +4,17 @@
+ -
+
-
- <%= combobox_tag :movie, movies_path, id: "allow-new", placeholder: "allow-new", name_when_new: :new_movie, data: { action: "hw-combobox:selection->combobox--events#showSelection hw-combobox:closed->combobox--events#showClosed" } %> - <%= combobox_tag :movie, movies_path, id: "required", placeholder: "required", required: true, data: { action: "hw-combobox:selection->combobox--events#showSelection hw-combobox:closed->combobox--events#showClosed" } %> + <%= combobox_tag :movie, movies_path, id: "allow-new", placeholder: "allow-new", name_when_new: :new_movie, data: { action: "hw-combobox:preselection->combobox--events#showPreselection hw-combobox:selection->combobox--events#showSelection" } %> + <%= combobox_tag :movie, movies_path, id: "required", placeholder: "required", required: true, data: { action: "hw-combobox:preselection->combobox--events#showPreselection hw-combobox:selection->combobox--events#showSelection" } %>
diff --git a/test/dummy/app/views/comboboxes/multiselect_custom_events.html.erb b/test/dummy/app/views/comboboxes/multiselect_custom_events.html.erb index e065980..2fc8bbf 100644 --- a/test/dummy/app/views/comboboxes/multiselect_custom_events.html.erb +++ b/test/dummy/app/views/comboboxes/multiselect_custom_events.html.erb @@ -4,14 +4,14 @@
+ -
+
-
@@ -21,7 +21,7 @@ label: "States", multiselect_chip_src: new_state_chip_path, placeholder: "Select states", - data: { action: "hw-combobox:selection->combobox--events#showSelection hw-combobox:closed->combobox--events#showClosed hw-combobox:removal->combobox--events#showRemoval" } %> + data: { action: "hw-combobox:preselection->combobox--events#showPreselection hw-combobox:selection->combobox--events#showSelection hw-combobox:removal->combobox--events#showRemoval" } %>
diff --git a/test/system/hotwire_combobox_test.rb b/test/system/hotwire_combobox_test.rb index ea9ecb2..f0159ae 100644 --- a/test/system/hotwire_combobox_test.rb +++ b/test/system/hotwire_combobox_test.rb @@ -631,13 +631,13 @@ class HotwireComboboxTest < ApplicationSystemTestCase assert_text "Ready to listen for hw-combobox events!" - assert_no_text "selections:" + assert_no_text "preselections:" open_combobox "#allow-new" type_in_combobox "#allow-new", "A Bea" - assert_text "selections: 1." - assert_text "event: hw-combobox:selection" + assert_text "preselections: 1." + assert_text "event: hw-combobox:preselection" assert_text "value: #{movies(:a_beautiful_mind).id}" assert_text "display: A Beautiful Mind" assert_text "query: A Bea" @@ -646,12 +646,12 @@ class HotwireComboboxTest < ApplicationSystemTestCase assert_text "isValid: true" assert_text "previousValue: " - assert_no_text "event: hw-combobox:closed" + assert_no_text "event: hw-combobox:selection" type_in_combobox "#allow-new", "t" - assert_text "selections: 2." - assert_text "event: hw-combobox:selection" + assert_text "preselections: 2." + assert_text "event: hw-combobox:preselection" assert_text "value: A Beat" assert_text "display: A Beat" assert_text "query: A Beat" @@ -660,13 +660,12 @@ class HotwireComboboxTest < ApplicationSystemTestCase assert_text "isValid: true" assert_text "previousValue: #{movies(:a_beautiful_mind).id}" - assert_no_text "closings:" - assert_no_text "event: hw-combobox:closed" + assert_no_text "event: hw-combobox:selection" click_away - assert_text "closings: 1." - assert_text "event: hw-combobox:closed" + assert_text "selections: 1." + assert_text "event: hw-combobox:selection" assert_text "value: A Beat" assert_text "display: A Beat" assert_text "query: A Beat" @@ -677,8 +676,8 @@ class HotwireComboboxTest < ApplicationSystemTestCase open_combobox "#required" type_in_combobox "#required", "A Bea" - assert_text "selections: 3." - assert_text "event: hw-combobox:selection" + assert_text "preselections: 3." + assert_text "event: hw-combobox:preselection" assert_text "value: #{movies(:a_beautiful_mind).id}" assert_text "display: A Beautiful Mind" assert_text "query: A Bea" @@ -689,8 +688,8 @@ class HotwireComboboxTest < ApplicationSystemTestCase type_in_combobox "#required", "t" - assert_text "selections: 4." - assert_text "event: hw-combobox:selection" + assert_text "preselections: 4." + assert_text "event: hw-combobox:preselection" assert_text "value: " assert_text "display: A Beat" assert_text "query: A Beat" @@ -701,8 +700,8 @@ class HotwireComboboxTest < ApplicationSystemTestCase click_away - assert_text "closings: 2." - assert_text "event: hw-combobox:closed" + assert_text "selections: 2." + assert_text "event: hw-combobox:selection" assert_text "value: " assert_text "display: A Beat" assert_text "query: A Beat" @@ -717,8 +716,8 @@ class HotwireComboboxTest < ApplicationSystemTestCase click_on_option "The Godfather Part III" assert_text "previousValue: #{movies(:the_godfather_part_ii).id}" - assert_text "selections: 6." - assert_text "closings: 4." + assert_text "preselections: 6." + assert_text "selections: 4." end test "customized elements" do @@ -952,14 +951,14 @@ class HotwireComboboxTest < ApplicationSystemTestCase visit multiselect_custom_events_path assert_text "Ready to listen for hw-combobox events!" + assert_no_text "event: hw-combobox:preselection" assert_no_text "event: hw-combobox:selection" - assert_no_text "event: hw-combobox:closed" - assert_no_text "selections:" + assert_no_text "preselections:" open_combobox "#states-field" type_in_combobox "#states-field", "mi" - assert_text "event: hw-combobox:selection" + assert_text "event: hw-combobox:preselection" assert_text "value: #{states(:michigan).id}." assert_text "display: Michigan" assert_text "query: Mi" @@ -967,13 +966,13 @@ class HotwireComboboxTest < ApplicationSystemTestCase assert_text "isNewAndAllowed: false" assert_text "isValid: true" assert_text "previousValue: " - assert_text "selections: 2." # `m`, then `mi` - assert_no_text "event: hw-combobox:closed" + assert_text "preselections: 2." # `m`, then `mi` + assert_no_text "event: hw-combobox:selection" click_away assert_closed_combobox - assert_text "event: hw-combobox:closed" + assert_text "event: hw-combobox:selection" assert_text "value: #{states(:michigan).id}." assert_text "display: Michigan" assert_text "query: Michigan" @@ -981,9 +980,9 @@ class HotwireComboboxTest < ApplicationSystemTestCase assert_text "isNewAndAllowed: " assert_text "isValid: true" assert_text "previousValue: " - assert_text "closings: 1." + assert_text "selections: 1." - assert_text "selections: 3." + assert_text "preselections: 3." remove_chip "Michigan" assert_open_combobox @@ -995,7 +994,7 @@ class HotwireComboboxTest < ApplicationSystemTestCase click_on_option "Arkansas" click_on_option "Colorado" - assert_text "event: hw-combobox:selection" + assert_text "event: hw-combobox:preselection" assert_text "value: #{states(:arkansas, :colorado).pluck(:id).join(",")}." assert_text "display: Colorado." assert_text "query: Colorado." @@ -1006,7 +1005,7 @@ class HotwireComboboxTest < ApplicationSystemTestCase assert_text "removedDisplay: ." assert_text "removedValue: ." - assert_text "event: hw-combobox:closed" + assert_text "event: hw-combobox:selection" assert_text "value: #{states(:arkansas, :colorado).pluck(:id).join(",")}." assert_text "display: Colorado." assert_text "query: Colorado." @@ -1019,8 +1018,8 @@ class HotwireComboboxTest < ApplicationSystemTestCase click_away - assert_text "selections: 7." # TODO: lockInSelection causes duplicate selection events; shouldn't lock-in unnecessarily - assert_text "closings: 4." + assert_text "preselections: 7." # TODO: lockInSelection causes duplicate selection events; shouldn't lock-in unnecessarily + assert_text "selections: 4." end test "navigating chips with keyboard" do @@ -1061,6 +1060,7 @@ class HotwireComboboxTest < ApplicationSystemTestCase [ states(:alabama).id ] type_in_combobox "#states-field", "New,place", :enter # comma is stripped away + assert_chip_with text: "Newplace" click_away assert_combobox_display_and_value \ @@ -1260,6 +1260,7 @@ def on_slow_device(delay:) def tab_away find("body").send_keys(:tab, :tab) + assert_closed_combobox end def click_away @@ -1268,6 +1269,8 @@ def click_away else find("#clickable").click end + + assert_closed_combobox end def click_on_top_left_corner