title: Modifying Selectize.js library to allow editing of selected options
body: <p>Using Selectize.js in an Angular 9 application for selecting multiple values. Please see links to my UI at the end
  <a href="https://selectize.github.io/selectize.js/" rel="nofollow noreferrer">https://selectize.github.io/selectize.js/</a></p>
  <p><a href="https://github.com/selectize/selectize.js" rel="nofollow noreferrer">https://github.com/selectize/selectize.js</a></p>
  <p>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 &quot;features can be added to Selectize without modifying the main library.&quot; I'm making use of this concept to override <code>onMouseDown</code> event, where I'm attempting to make the clicked item editable. I have successfully used this method to override <code>onKeyDown</code> to implement editing of the last selected value by clicking on backspace. Please see code pasted at the bottom. <code>this.onKeyDown = (function() {...</code></p>
  <p><a href="https://github.com/selectize/selectize.js/blob/master/docs/plugins.md" rel="nofollow noreferrer">https://github.com/selectize/selectize.js/blob/master/docs/plugins.md</a></p>
  <p>The already selected items are shown as a layer of <code>div</code> elements over the underlying input. To make a selected item editable, I'm removing the selected element <code>div</code> from the DOM, populating the underlying <code>input</code> element with the text from the <code>div</code>. That way that particular item becomes a <code>input</code> from a <code>div</code> and is editable.</p>
  <p>There are a few issues im running into:</p>
  <ol>
  <li><p>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 <code>input</code> element but not put the caret at the right place in <code>input</code>. By default the caret shows at the end and the user can move it around.</p>
  </li>
  <li><p>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 <code>div's</code> and populating the <code>input</code> 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.</p>
  </li>
  </ol>
  <p>Trying to see if anyone has worked on something similar or has any suggestions. Thanks in advance!</p>
  <pre><code>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 &amp;&amp; this.$activeItems.length &gt; 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(&quot;currentEdit&quot;);
  
            if (index &gt;= 0 &amp;&amp; index &lt; this.items.length) {
              if (this.deleteSelection(e)) {
                localStorage.setItem(&quot;currentEdit&quot;, text);
                this.setTextboxValue(text);
                this.refreshOptions(true);
                if (prevEdit &amp;&amp; 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 &amp;&amp; this.$control_input.val() === '' &amp;&amp; !this.$activeItems.length) {
            index = this.caretPos - 1;
  
            if (index &gt;= 0 &amp;&amp; index &lt; 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;
  })();
  
  </code></pre>
  <p>Pictures of UI and work in progress</p>
  <p>Editing last element by clicking backspace</p>
  <p><a href="https://i.stack.imgur.com/wULcT.png" rel="nofollow noreferrer">https://i.stack.imgur.com/wULcT.png</a></p>
  <p>Editing middle element by clicking on it</p>
  <p><a href="https://i.stack.imgur.com/U5hxd.png" rel="nofollow noreferrer">https://i.stack.imgur.com/U5hxd.png</a></p>