selective-ui 1.4.3 → 1.4.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "selective-ui",
-  "version": "1.4.3",
+  "version": "1.4.4",
   "description": "An overlay for the HTML select element.",
   "author": "Huỳnh Công Xuân Mai",
   "license": "MIT",

package/src/ts/components/accessorybox.ts

@@ -2,6 +2,7 @@ import { MixedAdapter } from "../adapter/mixed-adapter";
 import { Lifecycle } from "../core/base/lifecycle";
 import { ModelManager } from "../core/model-manager";
 import { OptionModel } from "../models/option-model";
+import { SelectBoxAction } from "../types/components/searchbox.type";
 import { LifecycleState } from "../types/core/base/lifecycle.type";
 import { MixedItem } from "../types/core/base/mixed-adapter.type";
 import { MountViewResult } from "../types/utils/libs.type";
@@ -113,6 +114,36 @@ export class AccessoryBox extends Lifecycle {
         if (options) this.initialize(options);
     }
 
+    /**
+     * Internal SelectBox action bridge used by the accessory box to communicate
+     * with the parent SelectBox instance.
+     *
+     * This reference is intentionally lightweight and acts as a direct integration
+     * point between chip interactions and the main Select component behavior.
+     *
+     * Current responsibilities:
+     * - Read runtime interaction state:
+     *   - `readonly`
+     *   - `disabled`
+     * - Trigger synchronized change propagation through:
+     *   - `change(null, true)`
+     *
+     * Usage flow:
+     * - When a chip remove button is clicked:
+     *   1) AccessoryBox checks `readonly` / `disabled`
+     *   2) Updates `modelData.selectedNonTrigger = false`
+     *   3) Delegates the final change pipeline back to the SelectBox instance
+     *      through `internalInstance.change(...)`
+     *
+     * Notes:
+     * - This property is optional because the AccessoryBox can exist before the
+     *   parent SelectBox finishes wiring dependencies.
+     * - The instance is not owned by AccessoryBox and therefore is not destroyed
+     *   during {@link destroy}.
+     * - Intended for internal framework communication only.
+     */
+    public internalInstance?: SelectBoxAction = null;
+
     /**
      * Stores options and starts lifecycle initialization.
      *
@@ -265,6 +296,7 @@ export class AccessoryBox extends Lifecycle {
     public setModelData(modelDatas: OptionModel[]): void {
         if (!this.node || !this.options) return;
         this.node.replaceChildren();
+        const superThis = this;
 
         if (modelDatas.length > 0 && this.options.multiple) {
             modelDatas.forEach((modelData) => {
@@ -282,10 +314,13 @@ export class AccessoryBox extends Lifecycle {
                                         title: `${this.options!.textAccessoryDeselect}${modelData.textContent}`,
                                         onclick: async (evt: MouseEvent) => {
                                             evt.preventDefault();
-                                            await this.modelManager?.triggerChanging?.(
-                                                "select",
-                                            );
-                                            modelData.selected = false;
+                                            const instance = superThis.internalInstance;
+                                            if (instance.readonly || instance.disabled) {
+                                                return;
+                                            }
+                                            
+                                            modelData.selectedNonTrigger = false;
+                                            instance?.change(null, true);
                                         },
                                     },
                                 },

package/src/ts/components/selectbox.ts

@@ -132,7 +132,7 @@ export class SelectBox extends Lifecycle {
      *
      * @internal
      */
-    private isOpen = false;
+    private isOpen: boolean = false;
 
     /**
      * Tracks whether an initial AJAX load has been performed at least once.
@@ -140,7 +140,7 @@ export class SelectBox extends Lifecycle {
      *
      * @internal
      */
-    private hasLoadedOnce = false;
+    private hasLoadedOnce: boolean = false;
 
     /**
      * Tracks whether the instance is in "pre-search" mode (a search is about to happen).
@@ -148,7 +148,7 @@ export class SelectBox extends Lifecycle {
      *
      * @internal
      */
-    private isBeforeSearch = false;
+    private isBeforeSearch: boolean = false;
 
     /**
      * Tracks whether {@link deInit} has already run.
@@ -158,7 +158,7 @@ export class SelectBox extends Lifecycle {
      *
      * @internal
      */
-    private hasDeInitialized = false;
+    private hasDeInitialized: boolean = false;
 
     /**
      * Selective context (global helper / registry).
@@ -227,6 +227,7 @@ export class SelectBox extends Lifecycle {
         if (!this.options || !this.node) return;
         this.options.readonly = value;
         this.node.classList.toggle("readonly", value);
+        this.node.dataset["readonly"] = String(!!value);
     }
 
     /**
@@ -474,8 +475,11 @@ export class SelectBox extends Lifecycle {
         Refresher.resizeBox(select, this.node, true);
         select.classList.add("init");
 
-        // initial mask
         const action = this.getAction();
+        container.accessorybox.internalInstance = action;
+        this.oldValue = action.value;
+
+        // initial mask
         action?.change?.(null, false);
 
         if (this.options.preload) {