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

Align select item event with native <select> #1586

Open
5 tasks done
bytestream opened this issue Jan 24, 2021 · 5 comments
Open
5 tasks done

Align select item event with native <select> #1586

bytestream opened this issue Jan 24, 2021 · 5 comments
Labels
pending review This issue was closed as stale; since then additional review has been requested.

Comments

@bytestream
Copy link

bytestream commented Jan 24, 2021

I did:

  • Search for if my issue has already been submitted
  • Make sure I'm reporting something precise that needs to be fixed
  • Give my issue a descriptive and concise title
  • Create a minimal working example on JsFiddle or Codepen (or gave a link to a demo on the Selectize docs)
  • Indicate precise steps to reproduce in numbers and the result like below

Selectize does not respect the default behaviour of a <select> element when selecting an item. It uses a mousedown event rather than click. This deviation from the default causes issues with libraries which respect the default, for example Sweetalert2. See below issue for further context.

Steps to reproduce:

See jsfiddle @ sweetalert2/sweetalert2#2154 (comment)

Expected result:

Swal should not close

Actual result:

Swal closed

@oyejorge
Copy link

If I remember correctly, reorganizing the 'mousedown' event listeners helped fix this. selectize adds multiple 'mousedown' event listeners that, when combined into a single listener, makes it easier to control event bubbling in situations like this.

These two 'mousedown' listeners:
https://github.com/selectize/selectize.js/blob/master/src/selectize.js#L192
https://github.com/selectize/selectize.js/blob/master/src/selectize.js#L224

Can be combined into a single listener. Here's what it looks like in Tom Select:
https://github.com/orchidjs/tom-select/blob/master/src/tom-select.ts#L325

jsfiddle example using Tom Select

Hope this helps

@bytestream
Copy link
Author

Hey @oyejorge ! Nice work with Tom Select 😍

Maybe it's worth joining the collaborator team and merging your project in here with the intention of releasing a new major version?

@oyejorge
Copy link

Thanks, I'm not opposed. Reached out a while ago but felt like the best way for me to accomplish what I wanted was to work on my fork. Probably not the right place to talk about this, but let know if there's anything about the current state of Tom Select that wouldn't work or still needs work for a new major version.

@bytestream
Copy link
Author

I'm not opposed.

@oyejorge come chat https://keybase.io/team/selectize :)

@github-actions
Copy link
Contributor

This issue is stale because it has been open 90 days with no activity. Remove stale label or comment or this will be closed in 5 days

@risadams risadams added pending review This issue was closed as stale; since then additional review has been requested. and removed no-issue-activity labels Apr 29, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
pending review This issue was closed as stale; since then additional review has been requested.
Projects
None yet
Development

No branches or pull requests

3 participants