Modifying Selectize.js library to allow editing of selected options

Using Selectize.js in an Angular 9 application for selecting multiple values. Please see links to my UI at the end https://selectize.github.io/selectize.js/

https://github.com/selectize/selectize.js

I'm trying enable the user to edit the already selected values by simply clicking on the selected item. Selectize has the concept of Plugins by which "features can be added to Selectize without modifying the main library." I'm making use of this concept to override onMouseDown event, where I'm attempting to make the clicked item editable. I have successfully used this method to override onKeyDown to implement editing of the last selected value by clicking on backspace. Please see code pasted at the bottom. this.onKeyDown = (function() {...

https://github.com/selectize/selectize.js/blob/master/docs/plugins.md

The already selected items are shown as a layer of div elements over the underlying input. To make a selected item editable, I'm removing the selected element div from the DOM, populating the underlying input element with the text from the div. That way that particular item becomes a input from a div and is editable.

There are a few issues im running into:

1. Its not possible to determine the caret position from the div that was clicked. I am able to get the div text and pre-populate the input element but not put the caret at the right place in input. By default the caret shows at the end and the user can move it around.

2. Corer cases around when a name is already being edited and the user clicks on another item to edit. The selectize library is giving api to insert selections only at the end of the already selected items. For me to keep deleting the div's and populating the input to mimic the editing effect I need to be able to insert at different positions but the library doesnt seem to have the capability for it.

Trying to see if anyone has worked on something similar or has any suggestions. Thanks in advance!

var Selectize = require('./selectize-standalone');

(function () {
  Selectize.define('break_on_backspace_custom_plugin', function(options) {
    var self = this;

    options.text = options.text || function(option) {
      return option[this.settings.labelField];
    };


    this.onMouseDown = (function() {
      var original = self.onMouseDown;

      return function(e) {
        var index, option;

        if (!this.$control_input.val().length && this.$activeItems.length > 0) {
          index = this.caretPos - 1;
          var toBeEdited = this.$activeItems[0];
          var toBeEditedText = toBeEdited.textContent;
          var text = toBeEditedText.substring(0, toBeEditedText.length - 1);
          var prevEdit = localStorage.getItem("currentEdit");

          if (index >= 0 && index < this.items.length) {
            if (this.deleteSelection(e)) {
              localStorage.setItem("currentEdit", text);
              this.setTextboxValue(text);
              this.refreshOptions(true);
              if (prevEdit && prevEdit !== text) {
                this.addItem(prevEdit);
              }
            }

            //e.preventDefault();
            //return;
          }
        }



        //e.preventDefault();


        return original.apply(this, arguments);
      };
    })();

    this.onKeyDown = (function() {
      var original = self.onKeyDown;

      return function(e) {
        var index, option;

        if (e.keyCode === 8 && this.$control_input.val() === '' && !this.$activeItems.length) {
          index = this.caretPos - 1;

          if (index >= 0 && index < this.items.length) {
            option = this.options[this.items[index]];

            if (this.deleteSelection(e)) {
              //option.value = option.value.substring(0, option.value.length - 1);
              this.setTextboxValue(options.text.apply(this, [option]));
              this.refreshOptions(true);
            }

            e.preventDefault();
            return;
          }
        }

        return original.apply(this, arguments);
      };
    })();
  });

  return Selectize;
})();

Pictures of UI and work in progress

Editing last element by clicking backspace

https://i.stack.imgur.com/wULcT.png

Editing middle element by clicking on it

https://i.stack.imgur.com/U5hxd.png