Best way to listen for when an option is selected?

[timmyd87]

Me again sorry, I was reading the custom event emitter and looking in the source code, i can only see an event emitted being "dispatch("hw-combobox:selection", { target: this.element, detail })" in events.js but it's emitted on every key stroke, not just when an option is selected, what's the best way to listen for when an option is selected?

currently i have:

<%= pi.combobox :product_variant_id, search_product_variants_products_path, placeholder: "Search products", data: { action: "hw-combobox:selection->form#submit" } %>

[josefarias]

Ah good observation. That's because hotwire_combobox autoselects the first option that's visible as you type!

I think we could emit a different event when the combobox is closed that would fit your needs.

[timmyd87]

That would be amazing, the first one selected definitely might not be the one 'closed', thanks @josefarias i'll keep an eye out

[josefarias]

@timmyd87 funny you should mention it... Just merged #100!

Please point your gem to the main branch and try it out. Let me know if you run into trouble. Closing for now.

[timmyd87]

Thanks @josefarias for the fast turn around! Unfortunately am still only getting the selection event, just experimenting but i have in my gem file

gem "hotwire_combobox", github: "josefarias/hotwire_combobox", branch: "main" (ran bundle update hotwire_combobox)

and in my stimulus controller

` connect() {
console.log("Form Controller Connected")

const combobox = document.getElementsByClassName('hw-combobox')[0];

const events = ['click', 'input', 'hw-combobox:selection', 'hw-combobox:closed', 'change'];

events.forEach(event => {
  combobox.addEventListener(event, function(e) {
    console.log(`Event: ${event}`, e);
  });
});

}`

But im not getting the closed event at all, just input, click, selection etc are printing in the console

[josefarias]

@timmyd87 can you share the portion of your Gemfile.lock that relates to hotwire_combobox please? Can also share the whole thing if you don't mind, but I only need the combobox bit. Thanks!

[timmyd87]

@josefarias full one here sorry,

`GIT
remote: https://github.com/excid3/administrate.git
revision: a345248f4e66237816f3195893e1edf02d7be28f
branch: jumpstart
specs:
administrate (0.20.1)
actionpack (>= 6.0, < 8.0)
actionview (>= 6.0, < 8.0)
activerecord (>= 6.0, < 8.0)
jquery-rails (> 4.6.0)
kaminari (> 1.2.2)
sassc-rails (> 2.1)
selectize-rails (> 0.6)

GIT
remote: https://github.com/excid3/devise.git
revision: 871c1b7cf6a0cc24b5f8fd5bc165d9c261a6da23
branch: sign-in-after-reset-password-proc
specs:
devise (4.9.3)
bcrypt (> 3.0)
orm_adapter (> 0.1)
railties (>= 6.0.0)
responders
warden (~> 1.2.3)

GIT
remote: https://github.com/excid3/jbuilder.git
revision: 394014adca00e39e5c773a694b4b3d5d224f7e71
branch: partial-paths
specs:
jbuilder (2.11.5)
actionview (>= 5.0.0)
activesupport (>= 5.0.0)

GIT
remote: https://github.com/josefarias/hotwire_combobox.git
revision: 4ba1977
branch: main
specs:
hotwire_combobox (0.1.41)
rails (>= 7.0.7.2)
stimulus-rails (>= 1.2)
turbo-rails (>= 1.2)

GIT
remote: https://github.com/prawnpdf/prawn.git
revision: ce374035905ef7691ddfa2dc015f4ea734d1f737
specs:
prawn (2.5.0)
matrix (> 0.4)
pdf-core (> 0.10.0)
ttfunk (~> 1.8)

PATH
remote: lib/jumpstart
specs:
jumpstart (0.1.0)
rails

GEM
remote: https://rubygems.org/
specs:
actioncable (7.1.3.2)
actionpack (= 7.1.3.2)
activesupport (= 7.1.3.2)
nio4r (> 2.0)
websocket-driver (>= 0.6.1)
zeitwerk (> 2.6)
actionmailbox (7.1.3.2)
actionpack (= 7.1.3.2)
activejob (= 7.1.3.2)
activerecord (= 7.1.3.2)
activestorage (= 7.1.3.2)
activesupport (= 7.1.3.2)
mail (>= 2.7.1)
net-imap
net-pop
net-smtp
actionmailer (7.1.3.2)
actionpack (= 7.1.3.2)
actionview (= 7.1.3.2)
activejob (= 7.1.3.2)
activesupport (= 7.1.3.2)
mail (> 2.5, >= 2.5.4)
net-imap
net-pop
net-smtp
rails-dom-testing (> 2.2)
actionpack (7.1.3.2)
actionview (= 7.1.3.2)
activesupport (= 7.1.3.2)
nokogiri (>= 1.8.5)
racc
rack (>= 2.2.4)
rack-session (>= 1.0.1)
rack-test (>= 0.6.3)
rails-dom-testing (> 2.2)
rails-html-sanitizer (> 1.6)
actiontext (7.1.3.2)
actionpack (= 7.1.3.2)
activerecord (= 7.1.3.2)
activestorage (= 7.1.3.2)
activesupport (= 7.1.3.2)
globalid (>= 0.6.0)
nokogiri (>= 1.8.5)
actionview (7.1.3.2)
activesupport (= 7.1.3.2)
builder (> 3.1)
erubi (> 1.11)
rails-dom-testing (> 2.2)
rails-html-sanitizer (> 1.6)
activejob (7.1.3.2)
activesupport (= 7.1.3.2)
globalid (>= 0.3.6)
activemodel (7.1.3.2)
activesupport (= 7.1.3.2)
activemodel-serializers-xml (1.0.2)
activemodel (> 5.x)
activesupport (> 5.x)
builder (> 3.1)
activerecord (7.1.3.2)
activemodel (= 7.1.3.2)
activesupport (= 7.1.3.2)
timeout (>= 0.4.0)
activeresource (6.1.0)
activemodel (>= 6.0)
activemodel-serializers-xml (> 1.0)
activesupport (>= 6.0)
activestorage (7.1.3.2)
actionpack (= 7.1.3.2)
activejob (= 7.1.3.2)
activerecord (= 7.1.3.2)
activesupport (= 7.1.3.2)
marcel (> 1.0)
activesupport (7.1.3.2)
base64
bigdecimal
concurrent-ruby (> 1.0, >= 1.0.2)
connection_pool (>= 2.2.5)
drb
i18n (>= 1.6, < 2)
minitest (>= 5.1)
mutex_m
tzinfo (> 2.0)
acts_as_tenant (1.0.1)
rails (>= 6.0)
addressable (2.8.6)
public_suffix (>= 2.0.2, < 6.0)
administrate-field-active_storage (1.0.1)
administrate (>= 0.2.2)
rails (>= 7.0)
annotate (3.2.0)
activerecord (>= 3.2, < 8.0)
rake (>= 10.4, < 14.0)
ast (2.4.2)
base64 (0.2.0)
bcrypt (3.1.20)
better_html (2.0.2)
actionview (>= 6.0)
activesupport (>= 6.0)
ast (> 2.0)
erubi (> 1.4)
parser (>= 2.4)
smart_properties
bigdecimal (3.1.6)
bindex (0.8.1)
bootsnap (1.18.3)
msgpack (> 1.2)
brakeman (6.1.2)
racc
builder (3.2.4)
capybara (3.40.0)
addressable
matrix
mini_mime (>= 0.1.3)
nokogiri (> 1.11)
rack (>= 1.6.0)
rack-test (>= 0.6.3)
regexp_parser (>= 1.5, < 3.0)
xpath (> 3.2)
childprocess (5.0.0)
chronic (0.10.2)
chunky_png (1.4.0)
concurrent-ruby (1.2.3)
connection_pool (2.4.1)
countries (5.7.2)
unaccent (> 0.3)
country_select (8.0.3)
countries (> 5.0)
crack (1.0.0)
bigdecimal
rexml
crass (1.0.6)
cssbundling-rails (1.4.0)
railties (>= 6.0.0)
currency_select (6.0.0)
actionview (>= 6.1.0, < 7.2)
money (> 6.0)
date (3.3.4)
debug (1.9.1)
irb (> 1.10)
reline (>= 0.3.8)
devise-i18n (1.12.0)
devise (>= 4.9.0)
dotenv (3.1.0)
drb (2.2.1)
erb_lint (0.5.0)
activesupport
better_html (>= 2.0.1)
parser (>= 2.7.1.4)
rainbow
rubocop
smart_properties
error_highlight (0.6.0)
erubi (1.12.0)
et-orbi (1.2.8)
tzinfo
faraday (2.9.0)
faraday-net_http (>= 2.0, < 3.2)
faraday-net_http (3.1.0)
net-http
ffi (1.16.3)
fugit (1.10.1)
et-orbi (> 1, >= 1.2.7)
raabro (> 1.4)
globalid (1.2.1)
activesupport (>= 6.1)
good_job (3.26.1)
activejob (>= 6.0.0)
activerecord (>= 6.0.0)
concurrent-ruby (>= 1.0.2)
fugit (>= 1.1)
railties (>= 6.0.0)
thor (>= 0.14.1)
hash_diff (1.1.1)
hashdiff (1.1.0)
hashids (1.0.6)
hashie (5.0.0)
httparty (0.21.0)
mini_mime (>= 1.0.0)
multi_xml (>= 0.5.2)
i18n (1.14.4)
concurrent-ruby (> 1.0)
image_processing (1.12.2)
mini_magick (>= 4.9.5, < 5)
ruby-vips (>= 2.0.17, < 3)
iniparse (1.5.0)
inline_svg (1.9.0)
activesupport (>= 3.0)
nokogiri (>= 1.6)
invisible_captcha (2.2.0)
rails (>= 5.2)
io-console (0.7.2)
irb (1.12.0)
rdoc
reline (>= 0.4.2)
jquery-rails (4.6.0)
rails-dom-testing (>= 1, < 3)
railties (>= 4.2.0)
thor (>= 0.14, < 2.0)
jsbundling-rails (1.3.0)
railties (>= 6.0.0)
json (2.7.1)
jwt (2.8.1)
base64
kaminari (1.2.2)
activesupport (>= 4.1.0)
kaminari-actionview (= 1.2.2)
kaminari-activerecord (= 1.2.2)
kaminari-core (= 1.2.2)
kaminari-actionview (1.2.2)
actionview
kaminari-core (= 1.2.2)
kaminari-activerecord (1.2.2)
activerecord
kaminari-core (= 1.2.2)
kaminari-core (1.2.2)
language_server-protocol (3.17.0.3)
launchy (2.5.2)
addressable (> 2.8)
letter_opener (1.9.0)
launchy (>= 2.2, < 3)
letter_opener_web (2.0.0)
actionmailer (>= 5.2)
letter_opener (> 1.7)
railties (>= 5.2)
rexml
lint_roller (1.1.0)
local_time (3.0.2)
loofah (2.22.0)
crass (> 1.0.2)
nokogiri (>= 1.12.0)
mail (2.8.1)
mini_mime (>= 0.1.1)
net-imap
net-pop
net-smtp
marcel (1.0.4)
matrix (0.4.2)
mini_magick (4.12.0)
mini_mime (1.1.5)
minitest (5.22.2)
monetize (1.13.0)
money (> 6.12)
money (6.19.0)
i18n (>= 0.6.4, <= 2)
money-rails (1.15.0)
activesupport (>= 3.0)
monetize (> 1.9)
money (> 6.13)
railties (>= 3.0)
msgpack (1.7.2)
multi_xml (0.6.0)
mutex_m (0.2.0)
name_of_person (1.1.3)
activesupport (>= 5.2.0)
net-http (0.4.1)
uri
net-imap (0.4.10)
date
net-protocol
net-pop (0.1.2)
net-protocol
net-protocol (0.2.2)
timeout
net-smtp (0.4.0.1)
net-protocol
nio4r (2.7.0)
nokogiri (1.16.2-aarch64-linux)
racc (> 1.4)
nokogiri (1.16.2-arm-linux)
racc (> 1.4)
nokogiri (1.16.2-arm64-darwin)
racc (> 1.4)
nokogiri (1.16.2-x86-linux)
racc (> 1.4)
nokogiri (1.16.2-x86_64-darwin)
racc (> 1.4)
nokogiri (1.16.2-x86_64-linux)
racc (> 1.4)
noticed (2.1.3)
rails (>= 6.1.0)
oauth (1.1.0)
oauth-tty (> 1.0, >= 1.0.1)
snaky_hash (> 2.0)
version_gem (> 1.1)
oauth-tty (1.0.5)
version_gem (> 1.1, >= 1.1.1)
oauth2 (2.0.9)
faraday (>= 0.17.3, < 3.0)
jwt (>= 1.0, < 3.0)
multi_xml (> 0.5)
rack (>= 1.2, < 4)
snaky_hash (> 2.0)
version_gem (> 1.1)
oj (3.16.3)
bigdecimal (>= 3.0)
openssl (3.2.0)
orm_adapter (0.5.0)
overcommit (0.63.0)
childprocess (>= 0.6.3, < 6)
iniparse (> 1.4)
rexml (> 3.2)
pagy (6.5.0)
parallel (1.24.0)
parser (3.3.0.5)
ast (> 2.4.1)
racc
pay (7.1.1)
rails (>= 6.0.0)
pdf-core (0.10.0)
pg (1.5.6)
pg_search (2.3.6)
activerecord (>= 5.2)
activesupport (>= 5.2)
prawn-table (0.2.2)
prawn (>= 1.3.0, < 3.0.0)
prefixed_ids (1.6.1)
hashids (>= 1.0.0, < 2.0.0)
rails (>= 6.0.0)
pretender (0.5.0)
actionpack (>= 6.1)
prism (0.24.0)
psych (5.1.2)
stringio
public_suffix (5.0.4)
puma (6.4.2)
nio4r (> 2.0)
pundit (2.3.1)
activesupport (>= 3.0.0)
raabro (1.4.0)
racc (1.7.3)
rack (3.0.9.1)
rack-attack (6.7.0)
rack (>= 1.0, < 4)
rack-session (2.0.0)
rack (>= 3.0.0)
rack-test (2.1.0)
rack (>= 1.3)
rackup (2.1.0)
rack (>= 3)
webrick (> 1.8)
rails (7.1.3.2)
actioncable (= 7.1.3.2)
actionmailbox (= 7.1.3.2)
actionmailer (= 7.1.3.2)
actionpack (= 7.1.3.2)
actiontext (= 7.1.3.2)
actionview (= 7.1.3.2)
activejob (= 7.1.3.2)
activemodel (= 7.1.3.2)
activerecord (= 7.1.3.2)
activestorage (= 7.1.3.2)
activesupport (= 7.1.3.2)
bundler (>= 1.15.0)
railties (= 7.1.3.2)
rails-dom-testing (2.2.0)
activesupport (>= 5.0.0)
minitest
nokogiri (>= 1.6)
rails-html-sanitizer (1.6.0)
loofah (> 2.21)
nokogiri (> 1.14)
railties (7.1.3.2)
actionpack (= 7.1.3.2)
activesupport (= 7.1.3.2)
irb
rackup (>= 1.0.0)
rake (>= 12.2)
thor (> 1.0, >= 1.2.2)
zeitwerk (> 2.6)
rainbow (3.1.1)
rake (13.1.0)
rdoc (6.6.2)
psych (>= 4.0.0)
receipts (2.3.0)
prawn (>= 1.3.0, < 3.0.0)
prawn-table (> 0.2.1)
redirect_safely (1.0.0)
activemodel
redis (5.1.0)
redis-client (>= 0.17.0)
redis-client (0.21.0)
connection_pool
regexp_parser (2.9.0)
reline (0.4.3)
io-console (> 0.5)
responders (3.1.1)
actionpack (>= 5.2)
railties (>= 5.2)
rexml (3.2.6)
rotp (6.3.0)
rqrcode (2.2.0)
chunky_png (> 1.0)
rqrcode_core (> 1.0)
rqrcode_core (1.2.0)
rubocop (1.62.1)
json (> 2.3)
language_server-protocol (>= 3.17.0)
parallel (> 1.10)
parser (>= 3.3.0.2)
rainbow (>= 2.2.2, < 4.0)
regexp_parser (>= 1.8, < 3.0)
rexml (>= 3.2.5, < 4.0)
rubocop-ast (>= 1.31.1, < 2.0)
ruby-progressbar (> 1.7)
unicode-display_width (>= 2.4.0, < 3.0)
rubocop-ast (1.31.2)
parser (>= 3.3.0.4)
rubocop-performance (1.20.2)
rubocop (>= 1.48.1, < 2.0)
rubocop-ast (>= 1.30.0, < 2.0)
ruby-lsp (0.14.5)
language_server-protocol (> 3.17.0)
prism (>= 0.22.0, < 0.25)
sorbet-runtime (>= 0.5.10782)
ruby-lsp-rails (0.3.2)
actionpack (>= 6.0)
activerecord (>= 6.0)
railties (>= 6.0)
ruby-lsp (>= 0.14.2, < 0.15.0)
sorbet-runtime (>= 0.5.9897)
ruby-oembed (0.16.1)
ruby-progressbar (1.13.0)
ruby-vips (2.2.1)
ffi (> 1.12)
rubyzip (2.3.2)
sassc (2.4.0)
ffi (> 1.9)
sassc-rails (2.1.2)
railties (>= 4.0.0)
sassc (>= 2.0)
sprockets (> 3.0)
sprockets-rails
tilt
securerandom (0.3.1)
selectize-rails (0.12.6)
selenium-webdriver (4.18.1)
base64 (> 0.2)
rexml (> 3.2, >= 3.2.5)
rubyzip (>= 1.2.2, < 3.0)
websocket (> 1.0)
shopify_api (14.0.1)
activesupport
concurrent-ruby
hash_diff
httparty
jwt
oj
openssl
securerandom
sorbet-runtime
zeitwerk (> 2.5)
shopify_app (22.0.1)
activeresource
addressable (> 2.7)
jwt (>= 2.2.3)
rails (> 5.2.1)
redirect_safely (> 1.0)
shopify_api (>= 14.0.1, < 15.0)
sprockets-rails (>= 2.0.0)
shopify_graphql (1.2.2)
rails (>= 6.0.0)
shopify_api (>= 10.0)
shopify_app (>= 19.0)
smart_properties (1.17.0)
snaky_hash (2.0.1)
hashie
version_gem (> 1.1, >= 1.1.1)
sorbet-runtime (0.5.11288)
sprockets (4.2.1)
concurrent-ruby (> 1.0)
rack (>= 2.2.4, < 4)
sprockets-rails (3.4.2)
actionpack (>= 5.2)
activesupport (>= 5.2)
sprockets (>= 3.0.0)
standard (1.35.1)
language_server-protocol (> 3.17.0.2)
lint_roller (> 1.0)
rubocop (> 1.62.0)
standard-custom (> 1.0.0)
standard-performance (> 1.3)
standard-custom (1.0.2)
lint_roller (> 1.0)
rubocop (> 1.50)
standard-performance (1.3.1)
lint_roller (> 1.1)
rubocop-performance (> 1.20.2)
stimulus-rails (1.3.3)
railties (>= 6.0.0)
store_attribute (1.2.0)
activerecord (>= 6.0)
stringio (3.1.0)
stripe (10.11.0)
thor (1.3.1)
tilt (2.3.0)
timeout (0.4.1)
ttfunk (1.8.0)
bigdecimal (> 3.1)
turbo-rails (2.0.5)
actionpack (>= 6.0.0)
activejob (>= 6.0.0)
railties (>= 6.0.0)
tzinfo (2.0.6)
concurrent-ruby (> 1.0)
unaccent (0.4.0)
unicode-display_width (2.5.0)
uri (0.13.0)
version_gem (1.1.3)
warden (1.2.9)
rack (>= 2.0.9)
web-console (4.2.1)
actionview (>= 6.0.0)
activemodel (>= 6.0.0)
bindex (>= 0.4.0)
railties (>= 6.0.0)
webmock (3.23.0)
addressable (>= 2.8.0)
crack (>= 0.3.2)
hashdiff (>= 0.4.0, < 2.0.0)
webrick (1.8.1)
websocket (1.2.10)
websocket-driver (0.7.6)
websocket-extensions (>= 0.1.0)
websocket-extensions (0.1.5)
whenever (1.0.0)
chronic (>= 0.6.3)
xeroizer (3.0.1)
activesupport
builder (>= 2.1.2)
i18n
nokogiri
oauth (>= 0.4.5)
oauth2 (>= 1.4.0)
tzinfo
xpath (3.2.0)
nokogiri (~> 1.8)
zeitwerk (2.6.13)

PLATFORMS
aarch64-linux
arm-linux
arm64-darwin
x86-linux
x86_64-darwin
x86_64-linux

DEPENDENCIES
acts_as_tenant (> 1.0)
administrate!
administrate-field-active_storage (> 1.0.0)
annotate (>= 3.2.0)
bootsnap (>= 1.4.2)
brakeman
capybara (>= 3.39)
country_select (> 8.0)
cssbundling-rails (> 1.4.0)
currency_select
debug
devise!
devise-i18n (> 1.10)
dotenv
erb_lint
error_highlight (>= 0.4.0)
good_job
hotwire_combobox!
image_processing (> 1.12)
inline_svg (> 1.6)
invisible_captcha (> 2.0)
jbuilder!
jsbundling-rails (> 1.3.0)
jumpstart!
letter_opener_web (> 2.0)
local_time (> 3.0)
money-rails (> 1.12)
name_of_person (> 1.0)
nokogiri (>= 1.12.5)
noticed (> 2.0)
oj (> 3.8)
overcommit
pagy (> 6.4)
pay (> 7.1)
pg
pg_search
prawn!
prefixed_ids (> 1.2)
pretender (> 0.4)
puma (> 6.0)
pundit (> 2.1)
rack-attack (> 6.6)
rails (> 7.1.1)
receipts (> 2.1)
redis (> 5.0)
rotp (> 6.2)
rqrcode (> 2.1)
ruby-lsp-rails
ruby-oembed (> 0.16.0)
selenium-webdriver (>= 4.11.0)
shopify_app
shopify_graphql (> 1.2)
sprockets-rails (>= 3.4.1)
standard
stimulus-rails (> 1.0, >= 1.0.2)
store_attribute (> 1.0)
stripe (> 10.0)
turbo-rails (~> 2.0.0)
tzinfo-data
web-console (>= 4.1.0)
webmock
whenever
xeroizer

RUBY VERSION
ruby 3.3.0p0

BUNDLED WITH
2.5.6
`

[josefarias]

Hm that does look correct. I haven't been able to replicate though. If you could maybe share a new rails app where this behavior is exhibited that would be very helpful. I'll keep trying to reproduce in the meantime.

Thanks!