From 1e86f6f114a4549046f3983c743f4a9b56e8d3a3 Mon Sep 17 00:00:00 2001
From: Ahmed Zamil <ahmed@esiur.com>
Date: Sat, 24 Jan 2026 20:31:58 +0300
Subject: [PATCH] multi-select

---
 css/iui.css           | 24 +++++++++++++++++-------
 src/UI/Multiselect.js |  2 +-
 2 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/css/iui.css b/css/iui.css
index 51258e8..2a7b85e 100644
--- a/css/iui.css
+++ b/css/iui.css
@@ -164,8 +164,8 @@
     --multiselect-add-background-image: var(--add);
     --multiselect-add-background-image-hover: var(--add-active);
     --multiselect-list-li-border-bottom: 2px dotted #dadada;
-    --multiselect-list-remove-background-image: url(img/remove.png);
-    --multiselect-list-remove-background-image-hover: url(img/remove-hover.png);
+    --multiselect-list-remove-background-image: var(--remove);
+    --multiselect-list-remove-background-image-hover: var(--remove-active);
     --grid-window-over-border: #e13946 dotted 3px;
     --grid-window-drag-border: #46b7e6 dotted 3px;
     --datetimepicker-calendar-border-right: 3px solid pink;
@@ -1693,8 +1693,12 @@ html[dir='rtl'] .select-label, html[dir='rtl'] .select-autocomplete-textbox, htm
     max-height: 16em;
 }
 
+.multiselect-autocomplete-textbox:focus
+{
+        outline: none;
+}
 
-.select-autocomplete-textbox:focus, .searchlist-textbox:focus, .select-label:focus, .multiselect-autocomplete-textbox:focus {
+.select-autocomplete-textbox:focus, .searchlist-textbox:focus, .select-label:focus {
     outline: none;
     border-color: var(--textbox-border-color-focus);
     box-shadow: var(--textbox-box-shadow-focus);
@@ -1708,13 +1712,18 @@ html[dir='rtl'] .select-label, html[dir='rtl'] .select-autocomplete-textbox, htm
 }
 
 
-.select-autocomplete-textbox:focus + .select-autocomplete-arrow, .searchlist-textbox:focus + .searchlist-arrow, .select:focus + .select-arrow, .multiselect-autocomplete-textbox:focus + .multiselect-autocomplete-arrow, .multiselect-autocomplete-textbox:focus ~ .multiselect-add {
+/* .select-autocomplete-textbox:focus + .select-autocomplete-arrow, .searchlist-textbox:focus + .searchlist-arrow, .select:focus + .select-arrow, .multiselect-autocomplete-textbox:focus + .multiselect-autocomplete-arrow, .multiselect-autocomplete-textbox:focus ~ .multiselect-add { */
+
+.select-autocomplete-textbox:focus + .select-autocomplete-arrow, .searchlist-textbox:focus + .searchlist-arrow, .select:focus + .select-arrow {
+
     outline: none;
     border-color: var(--textbox-border-color-focus);
     box-shadow: var(--textbox-box-shadow-focus);
 }
+/* 
+.select-autocomplete-textbox-invalid + .select-autocomplete-arrow, .searchlist-textbox:focus + .searchlist-arrow, .select:focus + .select-arrow, .multiselect-autocomplete-textbox:focus + .multiselect-autocomplete-arrow, .multiselect-autocomplete-textbox:focus ~ .multiselect-add { */
 
-.select-autocomplete-textbox-invalid + .select-autocomplete-arrow, .searchlist-textbox:focus + .searchlist-arrow, .select:focus + .select-arrow, .multiselect-autocomplete-textbox:focus + .multiselect-autocomplete-arrow, .multiselect-autocomplete-textbox:focus ~ .multiselect-add {
+.select-autocomplete-textbox-invalid + .select-autocomplete-arrow, .searchlist-textbox:focus + .searchlist-arrow, .select:focus + .select-arrow {
     outline: none;
     border-color: var(--textbox-border-color-focus);
     box-shadow: var(--textbox-box-shadow-focus);
@@ -1737,6 +1746,7 @@ html[dir='rtl'] .select-label, html[dir='rtl'] .select-autocomplete-textbox, htm
     background-position: calc(100% / 2) calc(100% / 2);
     transition: var(--selectlist-transition);
     border-radius: 10px;
+    height: 24px;
 }
 
 
@@ -2291,11 +2301,11 @@ html[dir='rtl'] .bar, html[dir='rtl'] .datetimepicker-month, html[dir='rtl'] .da
     cursor: text;
 }
 
-.multiselect-input:focus-within {
+/* .multiselect-input:focus-within {
     outline: none;
     border-color: var(--textbox-border-color-focus);
     box-shadow: var(--textbox-box-shadow-focus);
-}
+} */
 
 .multiselect-input .multiselect-autocomplete-textbox {
     background: transparent;
diff --git a/src/UI/Multiselect.js b/src/UI/Multiselect.js
index f0f14fd..ae6d0c7 100644
--- a/src/UI/Multiselect.js
+++ b/src/UI/Multiselect.js
@@ -222,7 +222,7 @@ export default IUI.module(class Multiselect extends IUIElement {
         if (this.hasArrow) {
             this.arrow = document.createElement("div");
             this.arrow.className = this.cssClass + "-autocomplete-arrow";
-            this.header.appendChild(this.arrow);
+            this.wrap.appendChild(this.arrow);
 
             this.arrow.addEventListener("click", function () {
                 if (self.visible)