select2: Choosing a new tag won't fire the change event if ajax is used
Prerequisites
- I have searched for similar issues in both open and closed tickets and cannot find a duplicate
- The issue still exists against the latest
masterbranch of Select2 - This is not a usage question (Those should be directed to the community)
- I have attempted to find the simplest possible steps to reproduce the issue
- I have included a failing test as a pull request (Optional)
Steps to reproduce the issue
- Setup a select with enabled tags and ajax support
- Type an option, preferably a short one (example: “a”). The point is to not let the select search more than once. If you’re fast enough, you can use any word.
- Choose the new option
Expected behavior and actual behavior
I expect the select to trigger the change event, but nothing happens.
You can keep reproducing this if you clear the select, you don’t need to refresh.
If you type an option, let the select search, type one or more characters and then choose this option, the select will trigger the event just fine.
As a side note, this bug doesn’t happen if you set multiple to true.
Environment
Browsers
- Google Chrome
- Mozilla Firefox
- Internet Explorer
Operating System
- Windows
- Mac OS X
- Linux
- Mobile
Libraries
- jQuery version: 3.1.1
- Select2 version: 4.0.3
Isolating the problem
- This bug happens on the examples page
- The bug happens consistently across all tested browsers
- This bug happens when using Select2 without other plugins
- I can reproduce this bug in a jsbin
About this issue
- Original URL
- State: closed
- Created 7 years ago
- Reactions: 9
- Comments: 18 (5 by maintainers)
If @renehamburger’s theory is correct, then shouldn’t adding an empty
<option></option>to your<select>markup solve this?Alright, we should probably add this to the documentation for AJAX and/or dynamic option creation, then.
awesome thanks a lot!
The issue seems to be, that Select2 adds the tag not only as a result but also as an option to the
<select>:Even though it’s not selected, it appears as the selection in Chrome (and possibly other browsers). Probably because it’s the only option of the
<select>. The other issues are consequences of this, I would think.This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.
I have created a sample at CodePen that demonstrates the issue. (I’ve got a workaround that works for us in our code base, but I couldn’t get it to work in that sample.)