Improve ajax-select style

core/static/core/components/ajax-select.scss

@@ -1,10 +1,4 @@
 /* This also requires ajax-select-index.css */
-.tomselected {
-  .select2-container--default {
-    color: black;
-  }
-}
-
 .ts-dropdown {
 
   .select-item {
@@ -22,20 +16,22 @@
   }
 }
 
-.ts-control {
-
-  .item {
-
-    cursor: pointer;
-    background-color: #e4e4e4;
-    border: 1px solid #aaa;
-    border-radius: 4px;
-    display: inline-block;
-    margin-left: 5px;
-    margin-top: 5px;
-    margin-bottom: 5px;
-    padding-right: 10px;
-    padding-left: 10px;
-  }
+.ts-wrapper.plugin-remove_button:not(.rtl) .item .remove {
+  border-left: 1px solid black;
+}
 
+.ts-wrapper.multi .ts-control [data-value] {
+  background-image: none;
+  cursor: pointer;
+  background-color: #e4e4e4;
+  border: 1px solid #aaa;
+  border-radius: 4px;
+  display: inline-block;
+  margin-left: 5px;
+  margin-top: 5px;
+  margin-bottom: 5px;
+  padding-right: 10px;
+  padding-left: 10px;
+  text-shadow: none;
+  box-shadow: none;
 }

core/static/webpack/core/components/ajax-select-index.ts

@@ -1,4 +1,4 @@
-import "tom-select/dist/css/tom-select.css";
+import "tom-select/dist/css/tom-select.default.css";
 import { inheritHtmlElement, registerComponent } from "#core:utils/web-components";
 import TomSelect from "tom-select";
 import type {
@@ -71,7 +71,6 @@ class AutocompleteSelect extends inheritHtmlElement("select") {
   }
 
   protected shouldLoad(query: string) {
-    console.log(this);
     return query.length >= this.minCharNumberForSearch; // Avoid launching search with less than setup number of characters
   }
 

core/views/widgets/select.py

@@ -39,6 +39,7 @@ class AutoCompleteSelectMixin:
 
     def get_context(self, name, value, attrs):
         context = super().get_context(name, value, attrs)
+        context["widget"]["attrs"]["autocomplete"] = "off"
         context["component"] = self.component_name
         context["statics"] = {
             "js": [staticfiles_storage.url(file) for file in self.js],