Select2 V4: How to modify selected item after the user selecte it

Question

When user select an item from Select2 V4 component, the component shows it and user could not change this value. If user wants to modify active item and enter modified text, the Select2 assumes that it is a new value and adds it to the list. It is bad. How to change current active value and put it into selected item?

Answer 1

I believe what you want to do is listen for the select2:selecting event:

$('#mySelect').on('select2:selecting', function(e) {
  // Do stuff here
});

In your event handler you'll be able to remove the added item (or prevent it from being added...I haven't tried this myself) and change the user's selection. See https://select2.github.io/examples.html#events

A word of caution: what you want to do is not standard behavior for a select box. A standard HTML select jumps to the next option beginning with the letter the user typed. If you were to change that behavior you may find yourself with many unhappy users (see the principle of least surprise/astonishment).