I’m using Select2 4.0.13 with jQuery 3.5.1 and Bootstrap 4.6.0 inside a Django 3.2 project.
I have a form containing several autocompletes that each use remote data from API endpoints I set up on my server.
A few of the autocompletes have tags enabled because I want the user to be able to enter new data if it doesn’t already exist in the database. On those autocompletes I’m noticing some odd behavior that seems like it could be a bug (somewhat similar to that outlined in this post).
When the user starts typing, as soon as the character threshold or time limit is reached and the first GET request is fired off to retrieve data from the API, the search term appears above the search box and stays there. Even if the user backspaces to completely clear out the search box, and moves on to another field, that very first search terms stays “stuck”:
The only way that the user can clear the term is by selecting an option from the dropdown (whether it’s an option from the server or a tag created by the user).
Inside the same form I also have a remote data multiple select autocomplete without tags enabled, and it works exactly like I would expect it to.
I’m not sure why, in the case of the autocompletes with tags enabled, the text above the search box stays frozen on the initial search term. If that text is meant to represent a user-created tag-in-progress, why wouldn’t it change to reflect what the user was typing? Since the user’s tag-in-progress appears immediately below the search bar as the top item in the dropdown, it also seems redundant and confusing to have it appear in two places. Is there any config option that will disable that text from populating, or do I need to find a workaround?