From 87d29f50aa9f229a58a90579b9d1a296ab8c96aa Mon Sep 17 00:00:00 2001
From: jona <a@b.c>
Date: Tue, 14 Jan 2025 07:54:21 +0100
Subject: [PATCH] made autocomplete controller allow selecting text and
 autocommit typed text on blur

---
 .../attachment_autocomplete_controller.js     | 108 +++++++++++++-----
 1 file changed, 80 insertions(+), 28 deletions(-)

diff --git a/assets/controllers/elements/attachment_autocomplete_controller.js b/assets/controllers/elements/attachment_autocomplete_controller.js
index fe44baee..d7bd994d 100644
--- a/assets/controllers/elements/attachment_autocomplete_controller.js
+++ b/assets/controllers/elements/attachment_autocomplete_controller.js
@@ -27,58 +27,110 @@ export default class extends Controller {
     _tomSelect;
 
     connect() {
-
+        const self = this;
         let settings = {
             persistent: false,
             create: true,
-            maxItems: 1,
+            maxItems: 5,
             createOnBlur: true,
             selectOnTab: true,
             //This a an ugly solution to disable the delimiter parsing of the TomSelect plugin
-            delimiter: 'VERY_L0NG_D€LIMITER_WHICH_WILL_NEVER_BE_ENCOUNTERED_IN_A_STRING',
+            delimiter: ' ',
             render: {
-                item: (data, escape) => {
-                    return '<span>' + escape(data.label) + '</span>';
+                item: function item(data, escape) {
+                    var tpl = document.createElement('template');
+                    tpl.innerHTML = '<span>|' + escape(data.label) + '|</span>';
+                    var thing = tpl.content.firstChild;
+
+                    thing.addEventListener('click', evt => {
+                            if (!self._tomSelect.isFocused) {
+                                //return;
+                            }
+                            if (self._tomSelect.isLocked) return;
+                            var val = self._tomSelect.inputValue()
+                            if (self._tomSelect.options[val]) {
+                                self._tomSelect.addItem(val)
+                            } else if (self._tomSelect.settings.create) {
+                                self._tomSelect.createItem();
+                            }
+                            self._tomSelect.setTextboxValue()
+                            self._tomSelect.focus();
+                            self._tomSelect.removeItem(thing);
+                        }
+                    );
+
+                    return thing;
                 },
-                option: (data, escape) => {
+                option: function option(data, escape) {
                     if (data.image) {
-                        return "<div class='row m-0'><div class='col-2 pl-0 pr-1'><img class='typeahead-image' src='" + data.image + "'/></div><div class='col-10'>" + data.label + "</div></div>"
+                        return "<div class='row m-0'><div class='col-2 pl-0 pr-1'><img class='typeahead-image' src='" + data.image + "'/></div><div class='col-10'>" + data.label + "</div></div>";
                     }
                     return '<div>' + escape(data.label) + '</div>';
                 }
+            },
+            onInitialize: function () {
+            },
+            onItemRemove: function (value) {
+                console.log(value)
+                console.log(self._tomSelect.options)
+                self._tomSelect.setTextboxValue(value);
+                if (self._tomSelect.control_input.value.trim() === '') {
+                    var option = self.options[value];
+                    if (option) {
+                    }
+                }
+            },
+            plugins: {//'restore_on_backspace': {},
+                //'remove_button': {}
             }
         };
-
-        if(this.element.dataset.autocomplete) {
-            const base_url = this.element.dataset.autocomplete;
+        if (this.element.dataset.autocomplete) {
+            var base_url = this.element.dataset.autocomplete;
             settings.searchField = "label";
             settings.sortField = "label";
             settings.valueField = "label";
-            settings.load = (query, callback) => {
-                if(query.length < 2){
+            settings.load = function (query, callback) {
+                if (query.length < 2) {
                     callback();
                     return;
                 }
-                const url = base_url.replace('__QUERY__', encodeURIComponent(query));
-
-                fetch(url)
-                    .then(response => response.json())
-                    .then(json => {
-                        const data = json.map(x => {
-                            return {
-                                "label": x.name,
-                                "image": x.image,
-                            }
-                        });
-                        callback(data);
-                    }).catch(()=>{
+                var url = base_url.replace('__QUERY__', encodeURIComponent(query));
+                fetch(url).then(function (response) {
+                    return response.json();
+                }).then(function (json) {
+                    var data = json.map(function (x) {
+                        return {
+                            "label": x.name,
+                            "image": x.image
+                        };
+                    });
+                    callback(data);
+                })["catch"](function () {
                     callback();
                 });
-            };
+            }
+            ;
         }
-        this._tomSelect = new TomSelect(this.element, settings);
-    }
 
+        this._tomSelect = new tom_select__WEBPACK_IMPORTED_MODULE_31__["default"](this.element, settings);
+        this._tomSelect.hook("before", "onBlur", function () {
+            var val = self._tomSelect.inputValue()
+            if (!self._tomSelect.isLocked && self._tomSelect.options[val]) {
+                self._tomSelect.addItem(val)
+                self._tomSelect.setTextboxValue()
+            }
+        });
+        this._tomSelect.hook("before", "onKeyPress", function (e) {
+            var character = String.fromCharCode(e.keyCode || e.which);
+            if (!self._tomSelect.isLocked && self._tomSelect.settings.mode === 'multi' && character === self._tomSelect.settings.delimiter) {
+                var val = self._tomSelect.inputValue()
+                if (self._tomSelect.options[val]) {
+                    self._tomSelect.addItem(val)
+                    self._tomSelect.setTextboxValue()
+                }
+            }
+        });
+    }
     disconnect() {
         super.disconnect();
         //Destroy the TomSelect instance